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） |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
示例
接下来的章节将展示不同设备的网格系统的示例
