深入理解BootStrap的container
1、打开WebStorm集成开发工具，新建‘test.html’页面，并在同级目录创建文件夹，安装bootstrap等，如下图
2、在‘test.html’写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color: gold">fluid container</div>
<div class="container" style="background-color: green">container</div>
</body>
</html>
3、打开网页查看效果如下图，直观感受是container-fluid是满屏宽度，container有自己的宽度，离页面左右边缘有一定距离
4、按F12进入开发者模式，查看container-fluid，样式文件如下图，发现只有
padding内边距，下图箭头所示，margin-left:auto和margin-right:auto是水平居中作用
5、查看container，样式文件如下图，发现有padding内边距，而div的宽度是媒体查询，当页面宽度大于1200px时，宽度是1170px，margin-left:auto和margin-right:auto是水平居中作用
6、尝试缩小页面宽度，再次查看container的样式，此时启作用的就是媒体查询的当页面宽度992px-1200px之间时，宽度变为970px
7、上面讲解应该很清楚，当再次缩小页面宽度，就是container宽度媒体查询最小的那个了，bootstrap关于这两个容器源码如下：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：180
阅读量：175
阅读量：134
阅读量：181
阅读量：98