之前一直有个疑惑就是不知道container的内边距问题，总以为在全屏的时候，container是1170px另外30px是container的内边距搞的鬼，今天特意测试了一下，原来15px的内边距是在1170px内在减去左右15px的内边距，也就是内容区域的大小变成了1140px的大小。
然后我有特意看了下bootstrap的css源码，不但container有内边距，就连栅格布局中的col-之类也添加了内边距。
好在，bootstrap中提供了，对应的解决方案，就是在容器中添加一个.row类
<div class="container">
<div class="row"><div class="box"></div></div>
</div>
就可以完美解决内边距问题。唯一的不好就是如果设计图是1200px，而bootstrap的版心是1170px这有该怎么解决呢！作者有待探索。
以上说法附上测试代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>基本模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<style>
.container {
height: 500px;
border: 1px solid #000;
}
.container-fluid {
height: 500px;
border: 1px solid #000;
}
.box {
background-color: red;
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!--
bootstrap响应式容器1 container
特征: 1. 在不同的屏幕下面, 有不同的版心 (做了响应式处理)
0 - 768 - 992 - 1200 -
大屏幕 1170px
中屏幕 970px
小屏幕 750px
超小屏 宽度百分百
2. 拥有默认左右 15px的 padding 值
bootstrap 响应式容器2 container-fluid
1. 流式布局容器, 宽度100%
2. 也有默认的左右 15px padding值
row类作用: 用于抵消父元素的默认的左右 padding 值
本质是利用的 margin负值实现的
-->
<!-- 添加了row类的container响应式版心 抵消了左右15px左右的内边距-->
<div class="container">
<div class="row"><div class="box"></div></div>
</div>
<!-- 取消了row类的container响应式版心，未抵消内边距 抵消了-->
<div class="container">
<!-- <div class="row"> -->
<div class="box"></div>
<!-- </div>s -->
</div>
<div class="container-fluid">
<div class="row"><div class="box">container-fluid</div></div>
</div>
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="box">container-fluid</div>
<!-- </div> -->
</div>
<script src="./jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
更多内容请点击 前端Tree