一、实现原理
- 通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。
二、工作原理
- 数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
- 在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12
- 具体内容应放放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素。
- 通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

- 实现列组合方式非常简单,只涉及两个CSS两个特性:浮动(float:left)与宽度百分比(.col-md-6{width:50%;})。
三、使用
-
) - Bootstrap 在中型设备中,会查找带有 md 的类,并使用它们。在大型设备中,会查找带有 lg 的类,并使用它们。
- 响应式的列重叠:可以使用.clearfix class和响应式实用工具来解决。
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
/*
提供了 3 种不同的列布局,分别适用于三种设备。
在手机上,它将是左边 25% 右边 75% 的布局。
在平板电脑上,它将是 50%/50% 的布局。
在大型视口的设备上,它将是 33%/66% 的布局。
*/
四、列偏移
- 使用.col-md-offset-*类
- 这个类会把一个列的左外边距(margin)增加 * 列,其中 *范围是从1到11,并且要保证列与偏移列的总数不超过12.
- 如果超过12会发生行断裂,这一列会移到下一行。
五、列排序
- 通过添加类”.col-md-push-* “和”.col-pull-* “来实现向右/左移动 *列。
- Bootstrap通过设置left和right来实现定位效果。
六、列的嵌套
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>