Bootstrap网格系统
Bootstrap's网格系统最多允许跨页12列。
如果您不想单独使用全部12列，您可以将列，共同打造更宽的列：
| 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 | 跨度1 |
| 跨度4 | 跨度4 | 跨度4 | |||||||||
| 跨度4 | 跨度8 | ||||||||||
| 跨度6 | 跨度6 | ||||||||||
| 跨度12 | |||||||||||
Bootstrap's网格系统响应，并根据屏幕大小的列将重新安排：在大屏幕可能看起来与分三路举办的内容更好，但在小屏幕上会更好，如果内容项目被堆叠在彼此的顶部。
提示：请记住，网格列加起来应该有十二个一排。 更重要的是，列将堆叠无论viewport 。
网格类
该Bootstrap网格系统有四种类型：
- xs （用于手机）
- sm （平板电脑）
- md （台式机）
- lg （较大的桌面）
这些类以上可以结合起来，创造出更多的活力和灵活的布局。
提示：每个类最高可扩展至，所以如果你想设置相同的宽度为xs和sm ，你只需要指定xs 。
网格系统规则
一些Bootstrap网格系统的规则：
- 行必须放在一个内
.container（固定宽度）或.container-fluid进行适当调整和填充（全宽） - 用行来创建列水平组
- 内容应放在列内，只列可能是行的直接子
- 预定义类，如
.row和.col-sm-4可用于快速进行网格布局 - 列通过创建檐槽填充（列内容之间的差距）。 这是填充行偏移通过对阴性切缘第一个和最后一列
.rows - 格列由指定希望跨越12个可用的列数创建。 例如，三个相等的列将使用三个
.col-sm-4
一个基本结构Bootstrap电网
以下是一个基本的结构， Bootstrap格：
<div class="container">
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div>
</div> 所以，去创造你想要的布局，创建一个容器（ <div class="container"> ）。 接下来，创建一个行（ <div class="row"> ）。 然后，添加的列中的期望数目（代码具有适当.col-*-*的类）。 注意，在数字.col-*-*应该总是加起来12的每一行。
网格选项
下表总结了如何Bootstrap网格系统跨多个设备的工作原理：
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
例子
下面的章节显示为不同的设备的网格系统的例子：