布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
Copy
<div class="container">
...
</div>
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
Copy
<div class="container-fluid">
...
</div>
现在的container类
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1,.col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3,.col-md-3, .col-lg-3, .col-xs-4, .col-sm-4,.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5,.col-md-5, .col-lg-5, .col-xs-6, .col-sm-6,.col-md-6, .col-lg-6, .col-xs-7, .col-sm-7,.col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9,.col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11,.col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
- position:
- min-height:
- padding-right:
- padding-left:
布局原理:
http://www.cnblogs.com/willian/p/3558180.html
英文原文:http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works