Bootstrap 网格系统
Bootstrap 网格系统
Bootstrap 的网格系统允许页面上有最多 12 列。
如果您不想单独使用所有 12 列，可以将这些列组合在一起以创建更宽的列
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的网格系统是响应式的，列会根据屏幕大小重新排列：在大屏幕上，内容以三列组织可能更好看，但在小屏幕上，如果内容项堆叠在一起会更好。
提示：请记住，网格列在一行中应加起来等于 12。如果超过 12，无论视口大小如何，列都将堆叠。
网格类
Bootstrap 网格系统有四种类
xs（适用于手机 - 屏幕宽度小于 768px）sm（适用于平板电脑 - 屏幕宽度等于或大于 768px）md（适用于小型笔记本电脑 - 屏幕宽度等于或大于 992px）lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200px）
以上类可以组合以创建更动态和灵活的布局。
提示：每个类都会向上扩展，因此如果您希望为 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 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 网格系统如何在多种设备上工作
| 超小屏 <768px |
小 >=768px |
中 >=992px |
大 >=1200px |
|
|---|---|---|---|---|
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 适用于 | 手机 | 平板电脑 | 小型笔记本电脑 | 笔记本电脑和台式机 |
| 网格行为 | 始终水平 | 开始时折叠，在断点之上水平 | 开始时折叠，在断点之上水平 | 开始时折叠，在断点之上水平 |
| 容器宽度 | 无（自动） | 750px | 970px | 1170px |
| 列数 | 12 | 12 | 12 | 12 |
| 列宽 | 自动 | 约 62px | 约 81px | 约 97px |
| 沟槽宽度 | 30px（列两侧各 15px） | 30px（列两侧各 15px） | 30px（列两侧各 15px） | 30px（列两侧各 15px） |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移量 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
示例
接下来的章节将展示不同设备的网格系统示例
