登录 / 注册
JAVA 全系列
职业规划/学习方法
JAVA 快速入门
JAVA 基础深化和提高
数据库编程
网页编程和设计
JavaWeb开发
项目管理与SSM框架
生产环境部署与协同开发
SpringBoot与MybatisPlus
权限控制与安全认证
百战旅游网项目
消息中间件与高并发处理
Spring Cloud Alibaba技术栈
分布式文件存储与数据缓存
海量数据存储与查询
全文检索与日志管理
前后端分离技术VUE
微信与支付宝在线支付
亿级高并发电商项目
Spring Cloud微服务技术栈
租房网（Spring Cloud最新架构）
分布式医疗云平台
容器管理技术
高性能Web平台
分布式解决方案
云原生实战
JVM实战和BATJ大厂面试重难点
高并发实战和BATJ大厂面试重难点
数据结构和算法BATJ大厂面试重难点
面试和成功求职的秘技
大厂必问面试题详解
入职后快速成长到CTO
Python 全系列
Python入门
Python 深入与提高
Python 网络与并发编程
函数式编程和核心特性
Linux 环境编程基础
数据库编程基础
网页编程基础
Flask框架
Vue框架
Flask百战电商后台项目
Django框架
Django在线教育平台
Python_Tornado 框架
自动化操作办公软件、邮件、定时任务等
Python 爬虫开发
数据结构与算法
数据分析_数学知识
数据分析-数据可视化
数据分析-数据管理
数据分析-统计分析
Python数据分析项目
数据分析软件
人工智能基础_机器学习理论与实战
人工智能基础_深度学习理论与实战
Python量化交易(扩展)
Zookeeper分布式协调框架(扩展)
Hadoop 分布式文件系统：HDFS（扩展）
Hadoop 分布式计算框架：Mapreduce（扩展）
Hadoop 离线体系：Hive（扩展）
Spark体系之分布式计算（扩展）
电商大数据购买行为分析项目（扩展）
面试和成功求职的秘技
AIGC人工智能工具全能班
ChatGPT全攻略
Midjourney图像AI绘图
Stable Diffusion（自选模型）AI绘图
WEB前端全系列
职业规划/学习方法
HTML5+CSS3模块
JavaScript编程模块
jQuery编程模块
BootStrap框架模块
前后端交互
音乐社区高级项目模块
ECMAScript6新特性模块
JavaScript设计模式模块
HTML5新特性模块
Nodejs编程模块
前端工程化
数据可视化
诱人的TypeScript
微信小程序
React知识体系
React企业级项目
ReactNative跨平台应用开发框架
Vue3知识体系
Vue3企业级项目
Git版本控制器
Angular知识体系
uni-app框架
经典面试题解析
面试和成功求职的秘技
入职后快速成长到CTO
大厂算法特训班
计算机基础知识
数据结构
排序算法
前缀和与差分
并查集算法
高精度算法（大数加减乘除）
图论算法基础
图论算法提高
动态规划基础
动态规划提高
C++特训班
基础篇
对象篇
进阶篇
应用篇
大数据全系列
预科阶段
Linux 操作系统
大型网站高并发处理
Maven项目管理
Zookeeper分布式协调服务框架
Git项目版本管理
Hadoop 分布式文件系统HDFS
Hadoop 分布式计算MapReduce和资源管理Yarn
Hive数仓 项目一 电信基站掉话率分析实战
项目二 千亿级新零售购买行为分析项目
分布式数据库 HBase
日志采集Flume
项目三 万亿级电商日志离线分析系统
Elasticsearch 分布式搜索
Redis 缓存数据库
Scala分布式语言
Kafka消息队列
Spark分布式计算框架
项目四 PB级百战出行网约车
任务流调度系统Azkaban
Superset可视化系统
项目五 PB级音乐数据中心数仓综合项目
Flink实时计算引擎
项目六 亚秒级智慧交通实时监控平台
CDH集群管理
Kylin 数据仓库分析引擎(扩展)
Python数据挖掘语言
机器学习与数据挖掘
项目七 PB级推荐系统项目
大数据面试题精讲
面试和成功求职的秘技
入职后快速成长到CTO
人工智能
人工智能基础-快速入门
人工智能基础-Python基础
人工智能基础-Python科学计算和可视化
人工智能基础-高等数学知识强化
机器学习-线性回归
机器学习-线性分类
机器学习-无监督学习
机器学习-决策树系列
机器学习-概率图模型
机器学习-Kaggle竞赛实战
深度学习-原理和进阶
深度学习-图像识别原理
深度学习-图像识别项目实战
深度学习-目标检测YOLO(V8正在更新中)实战
深度学习-语义分割原理和实战
深度学习-人脸识别项目实战
深度学习-NLP自然语言处理原理和进阶
深度学习-NLP自然语言处理项目实战
深度学习-OCR文本识别
深度学习-语音识别【新增】
深度学习-知识图谱【新增】
模型量化、剪枝与知识蒸馏
【加课】Pytorch项目实战
【加课】百度飞桨PaddlePaddle实战【新增】
【加课】Linux 环境编程基础
【加课】算法与数据结构
【加课】C++基础【新增】
【加课】计算机图形学/机器视觉实战【新增】
【加课】 强化学习【新增】
【加课】 图神经网络【新增】
面试和成功求职的秘技
微服务
SSM 框架和项目开发
项目管理和Linux
SpringBoot与MybatisPlus
权限控制与安全认证
百战旅游网项目
分布式RPC调用和分布式文件存储
高性能消息中间件
高性能数据处理、NoSQL、分库分表
全文检索服务
前后端分离技术VUE
Spring Cloud Alibaba技术栈
亿级高并发电商项目
Spring cloud微服务技术栈
容器管理技术
分布式医疗云平台
租房网（Spring Cloud最新架构）
高性能Web平台
分布式解决方案
JVM实战和BATJ大厂面试重难点
高并发实战和BATJ大厂面试重难点
数据结构和算法
面试和成功求职的秘技
入职后快速成长到CTO
Java架构课程
码农到架构师的转变
JavaEE高级
ZooKeeper
NoSQL数据库
分布式文件系统
Spring全家桶（Spring Boot）
Spring全家桶（SpringData）
Spring全家桶（Spring Cloud）
搜索服务
消息中间件
安全管理框架
Session共享技术
配置管理中心
在线接口文档生成
分布式事务管理
系统深度优化
高并发与负载均衡
架构技术支撑
Storm实时数据处理
高可用架构技术
Hadoop 分布式计算框架：Mapreduce
Hadoop 离线计算体系：Hbase
Spark体系之分布式计算
电商日志分析平台项目实战
智慧交通项目实战
软件测试 全系列
测试环境和操作系统
Windows操作系统基础
Windows服务器
软件测试入门
功能测试与项目实战
测试方法与白盒测试
非功能测试
专项测试
功能自动化测试
性能自动化测试
接口自动化测试
App自动化测试
安全测试
面试题讲解与面试技巧
Java编程基础和Java Web开发基础
数据库基础
Linux操作系统
Python编程基础
分布式版本控制Git
7u职场软实力
职场软实力介绍
形象气质
声音塑造
情商
沟通力
说服力
说服力之销售
演讲力
领导力
毕设项目
各种开发环境的使用
互联网和移动互联网项目
JAVA基础项目
计算机考研408
C语言快速入门
数据结构
数据结构历年考题讲解
计算机组成原理
操作系统
操作系统历年考题讲解
计算机网络
计算机网络历年考题讲解
会员可以在此提问，百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面
截止目前，同学们一共提了 128778个问题
时间排序 推荐排序


4.1.1bootStrap布局.rar

老师：请问一下我这个代码怎么无法实现布局效果呢，总是占100%


WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 1楼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand">
        <img src="images/footer_logo.png" width="100" height="40" class="d-inline-block align-top" alt="" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">全国</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">游戏</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    演出
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">喜剧</a>
                    <a class="dropdown-item" href="#">话剧</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">想象</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                    不被选中
                    <span class="badge badge-danger">new</span>
                </a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>
<!--轮播图-->
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="images/1.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="images/2.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="images/3.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="images/4.jpg" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="box">
                    <img src="images/img1.jpg" class="img-fluid" alt="..." />
                    <ul>
                        <li><a href="#">音乐节</a></li>
                        <li><a href="#">音乐节</a></li>
                        <li><a href="#">音乐节</a></li>
                        <li><a href="#">音乐节</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--内容区域-->
<div class="container">
    <div class="row content-one">
        <div class="col-md-9">
            <div class="row">
                <div class="col-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="images/5.jpg" />
                        <div class="card-body">
                            12345
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="images/6.jpg" />
                        <div class="card-body">
                            12345
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="images/7.jpg" />
                        <div class="card-body">
                            12345
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="images/8.jpg" />
                        <div class="card-body">
                            12345
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">首页</a>
                    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">其他</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <img src="images/img2.jpg" class="img-fluid" alt="..." />
                    123456
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <img src="images/img3.jpg" class="img-fluid" alt="..." />
                    12345
                </div>
            </div>
        </div>
    </div>
    <img src="images/ad1.jpg" class="img-fluid" alt=".." />
    <div class="row content-three">
        <div class="col-md-9">
            <nav>
                <div class="nav nav-tabs" id="nav-tab1" role="tablist">
                    <a class="nav-item nav-link active" id="nav-home-tab1" data-toggle="tab" href="#nav-home1" role="tab" aria-controls="nav-home1" aria-selected="true">演唱会</a>
                    <a class="nav-item nav-link" id="nav-profile-tab1" data-toggle="tab" href="#nav-profile1" role="tab" aria-controls="nav-profile1" aria-selected="false">舞台</a>
                    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">话剧</a>
                    <a class="nav-item nav-link" id="nav-contact-tab1" data-toggle="tab" href="#nav-contact1" role="tab" aria-controls="nav-contact1" aria-selected="false">综艺</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent1">
                <div class="tab-pane fade show active" id="nav-home1" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/9.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/10.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/11.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/12.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/9.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/10.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/11.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 tab-list">
                            <div class="card">
                                <img class="card-img-top" src="images/12.jpg" alt="">
                                <p>[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile1" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="card">
                                <img class="card-img-top" src="images/5.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="card">
                                <img class="card-img-top" src="images/6.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="card">
                                <img class="card-img-top" src="images/7.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="card">
                                <img class="card-img-top" src="images/8.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                    <div class="row">
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/5.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/6.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/7.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/8.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact-tab">
                    <div class="row">
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/5.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/6.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/7.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="card">
                                <img class="card-img-top" src="images/8.jpg" />
                                <div class="card-body">
                                    12345
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="content-right">
                <div class="item">
                    内容1
                </div>
                <div class="item">
                    内容2
                </div>
                <div class="item">
                    内容3
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 clearfix">
                <img class="pull-left" src="images/footer_logo.png" alt=".." />
                <div class="info pull-right">
                    <p class="footer-title">电影官网</p>
                    <p class="small">占座</p>
                </div>
            </div>
            <div class="col-md-4 clearfix">
                <img class="pull-left" src="images/phoneIcon.png" alt=".." />
                <div class="info pull-right">
                    <p class="footer-title">电影官网</p>
                    <p class="small">占座</p>
                </div>
            </div>
            <div class="col-md-4 clearfix">
                <img class="pull-left" src="images/f_wx.png" alt=".." />
                <img class="pull-left" src="images/f_wpr.png" alt=".." />

                <div class="info pull-right">
                    <p class="footer-title">电影官网</p>
                    <p class="small">占座</p>
                </div>
            </div>
            <p class="address">@2015北京微影时代科技有限公司版权所有　　京ICP备14034406号-2</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

image.pngimage.pngimage.png和视频里老师写的代码还是有点区别的，不过效果基本上都达到了
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4实战 2楼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="container" style="width: 500px">
    <div class="row">
        <!--one-->
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="row">
        <!--        two-->
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./images/1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="./images/3.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="./images/2.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>



image.png


老师，第二个例子是复制的bootstrap官网上的轮播图，但是效果并没有达到，第一个是文档中的，二者并没有差距，但实现效果为何不同呢？而且官网很多都实现不了，是什么原因？
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4实战 3楼 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

问题1，JS那个引入不了

1624272107(1).png
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 4楼

4.1.1bootStrap布局.rar

bootstrap-4.5.0-dist.zip

老师  我更改了bootstrap的版本还是无法实现布局的效果，引入老师您给版本在移动端小屏时占比不是100%。bootstrap的版本有些什么注意的地方吗

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 5楼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- .card卡片组件（样式)
        卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。
        .card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。
        使用按钮组合，可以把一系列按钮编组在一行里，并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。 -->

        <!-- 下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将
        自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。 -->
        <div class="card" style="width:18rem; ">
            <img class="card-img-top" src="img/container.png" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">some quick example text to build on the card title and make card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>

</body>
</html>

QQ截图20201027122428.png

老师 我这个为什么出不来外面的边框啊 您看看是哪里出问题了
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4组件 6楼

老师好，在测试tooltips和popovers时候，popover没有弹出，而且在BootStrap样式中没有找到“.tooltip-test”和“.popover-test”这两个样式，倒是有一些关于“.bs-tooltip-*”和“.bs-popover-*”的样式，帮忙指导一下这个没有弹出的问题以及这一套样式的用法，谢谢。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
    Launch static backdrop modal
</button>
<div class="modal" tabindex="-1" id="staticBackdrop" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5>Popover in a modal</h5>
                <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
                <hr>
                <h5>Tooltips in a modal</h5>
                <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4组件 7楼

 为啥下拉列表展示不出来

<div class="navbar navbar-default">

        <div class="container">

            <div class="navbar-header">

                <a class="navbar-brand" href="#">lianxishen</a>

            </div>

            <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">首页</a></li>

                    <li><a href="#">新闻</a></li>

                    <li><a href="#">娱乐</a></li>

                    <li><a href="#">体育</a></li>


                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                            军事<span class="caret"></span>

                        </a>

                        <ul class="dropdown-menu">

                            <li><a href="#">空军</a></li>

                            <li><a href="#">陆军</a></li>

                            <li><a href="#">海军</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </div>


image.png
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 8楼

4.1.1BootStrap布局.zip

bootstrap-5.0.0-beta2-dist.zip

老师，我在官方下载的，在移动端不是100%，怎么回事？

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 9楼

image.png

老师，这段代码 $ 的用法，前面讲到过吗？怎么用的？
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap组件 10楼

老师，如果整个div高度定下来，里面表格的内容多出来了，我还想不换行，不加滚动条，全部显示，有办法吗？

我在写的时候，发现如果table不定宽度，那td里的内容没办法隐藏，可是我想法是弹性布局，这宽度定下来了，就不是那种分成3列的弹性布局了，这个有办法避免吗？实在不好意思，老师，代码让我整的有点长，麻烦老师了。

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/hpi/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>练习</title>
    <script src="static/js/href.js"></script>
    <!-- 框架必须 start -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/font-awesome.css" />
    <script src="static/js/jquery-2.0.3.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/jquery-ui.min.js"></script>
    <script src="static/js/inspinia.js"></script>
    <!-- 框架必须 end -->
    <!-- 消息提示插件 start -->
    <link rel="stylesheet" href="static/css/toastr/toastr.min.css" />
    <script src="static/js/toastr/toastr.min.js"></script>
    <!-- 消息提示插件 end -->

    <!-- 弹窗插件 strart-->
    <link rel="stylesheet" href="static/css/sweetalert/sweetalert.css" />
    <script src="static/js/sweetalert/sweetalert.min.js"></script>
    <!-- 弹窗插件 end -->
    <!-- 框架必须(需要放到最后) start -->
    <link rel="stylesheet" href="static/css/animate.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/theme.css" />
    <!-- 框架必须(需要放到最后) end -->
    <!-- 菜单插件 start -->
    <script src="static/js/metisMenu/jquery.metisMenu.js"></script>
    <!-- 菜单插件 end -->
    <!-- 滚动条插件 start -->
    <script src="static/js/slimscroll/jquery.slimscroll.js"></script>
    <!-- 滚动条插件 end -->
    <!-- Echarts start -->
    <script src="static/js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/chalk.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/walden.js" type="text/javascript" charset="utf-8"></script>
    <!-- Echarts end -->
    <link rel="stylesheet" href="static/css/datatables/datatables.min.css" />
    <script src="static/js/datatables/datatables.min.js"></script>
    <style>
       td{
            color: black;
           font-size:1rem;
        }
       #div{
           display: flex;
       }
      td{
          width: 10px;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          -webkit-text-overflow:ellipsis;
       }
      #div1{
      flew-grow:1;
      }
       #div2{
           flew-grow:1
       }
       #div3{
            flew-grow:1
        }
       #div1>table{
           width: 400px ;
           table-layout: fixed
       }
      #div1 >table>td{
           width: 20px;
           border: #0e9aef 1px solid;
           overflow:hidden;
           white-space:nowrap;
           text-overflow: ellipsis;
           -webkit-text-overflow: ellipsis;
       }
        @media screen and (min-width:992px) {
            .col-md-4{
                font-size: 0.1rem}
            @media screen and (min-width:768px) and (max-width: 992px) {
                .col-md-4{
                    font-size: 0.1rem;}
       @media screen and (max-width:768px) {
           .col-md-4 {
               font-size: 0.1rem}
       }
    </style>
<body style="border: rosybrown 1px solid;height: 400px">
    <div class="row" id="div" style="border: #0d3349 1px solid">
        <div class="col-md-4 " id="div1" style="height:100%  ;" >
           <table class="table-hover" >
               <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
        </table>
        </div>
        <div class="col-md-4" id="div2" style="height:100%;border: green 1px solid ">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
        <div class="col-md-4" id="div3" style="height:100%  ;border: blue 1px solid">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
    </div>
    <div id="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>
</body>
</head>
</html>
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 11楼

4.1.1bootStrap布局.rar

老师   我换了bootstrap版本，换成4.5.0版本的还是无法实现布局的效果，帮我看一下是哪儿出现问题了呢？


WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 12楼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm">三分之一</div>
            <div class="col-sm">三分之一</div>
            <div class="col-sm">三分之一</div>
        </div>
    </div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

image.png

老师，视频中4:30秒的那个布局跟我的这个不一样，是引入文件不同的缘故嘛。视频中老师引入的文件我没有，都是自己找的
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 13楼

你好，老师，这个我解决不了这个报错

模态框.rar

捕获.PNG

WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap JavaScript插件 14楼

老师有没有老师讲的PPT文档呀，方便以后看和记笔记
WEB前端全系列/第四阶段：BootStrap框架模块/BootStrap4基础 15楼

关于

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2024 百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护：百战汇智（北京）科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证：京B2-20212637