Bootstrap 4 网格系统
Bootstrap 4 网格系统
Bootstrap 的网格系统允许页面上有最多 12 列。
如果您不想单独使用全部 12 列，可以将这些列组合在一起以创建更宽的列
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的网格系统是响应式的，列将根据屏幕大小重新排列：在大屏幕上，内容以三列组织可能看起来更好，但在小屏幕上，内容项最好相互堆叠。
网格类
Bootstrap 4 网格系统有五个类
.col-(超小设备 - 屏幕宽度小于 576px).col-sm-(小设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768px).col-lg-(大型设备 - 屏幕宽度等于或大于 992px).col-xl-(超大设备 - 屏幕宽度等于或大于 1200px)
以上类可以组合以创建更动态和灵活的布局。
提示: 每个类都会向上扩展，因此如果您希望为 sm 和 md 设置相同的宽度，您只需要指定 sm。
网格系统规则
一些 Bootstrap 4 网格系统规则
- 行必须放置在
.container（固定宽度）或.container-fluid（全宽度）中，以实现正确的对齐和内边距 - 使用行创建水平列组
- 内容应放置在列内，并且只有列可以是行的直接子元素
- 预定义类（如
.row和.col-sm-4）可用于快速创建网格布局 - 列通过内边距创建沟槽（列内容之间的间隙）。通过
.rows上的负外边距，在第一列和最后一列中抵消了该内边距 - 网格列是通过指定您希望跨越的 12 个可用列的数量来创建的。例如，三个等宽列将使用三个
.col-sm-4 - 列宽以百分比表示，因此它们始终是流动的，并相对于其父元素进行大小调整
- Bootstrap 3 和 Bootstrap 4 之间最大的区别是 Bootstrap 4 现在使用 Flexbox 而不是浮动。Flexbox 的一个巨大优势是未指定宽度的网格列将自动布局为“等宽列”（和等高）。例如：三个带有
.col-sm的元素将从小型断点开始自动各自占据 33.33% 的宽度。提示：如果您想了解更多关于 Flexbox 的信息，可以阅读我们的 CSS Flexbox 教程。
请注意，IE9 及更早版本不支持 Flexbox。
如果您需要支持 IE8-9，请使用 Bootstrap 3。 它是最稳定的 Bootstrap 版本，并且仍然受到团队的支持以进行关键的 bug 修复和文档更改。但是，它不会添加任何新功能。
Bootstrap 4 网格的基本结构
以下是 Bootstrap 4 网格的基本结构
<!-- 控制列宽以及它们在不同设备上的显示方式 -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
自己动手试一试 »
第一个示例：创建一个行（<div class="row">）。然后，添加所需数量的列（带有适当的 .col-*-* 类的标签）。第一个星号 (*) 代表响应性：sm、md、lg 或 xl，而第二个星号代表一个数字，每行应始终加起来为 12。
第二个示例：不是为每个 col 添加数字，而是让 Bootstrap 处理布局，以创建等宽列：两个 "col" 元素 = 每个列 50% 宽度。三个列 = 每个列 33.33% 宽度。四个列 = 25% 宽度，依此类推。您还可以使用 .col-sm|md|lg|xl 使列具有响应性。
网格选项
下表总结了 Bootstrap 4 网格系统在不同屏幕尺寸下的工作方式
| 超小 (<576px) | 小 (>=576px) | 中 (>=768px) | 大 (>=992px) | 超大 (>=1200px) | |
|---|---|---|---|---|---|
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 网格行为 | 始终水平 | 开始时折叠，在断点之上水平 | 开始时折叠，在断点之上水平 | 开始时折叠，在断点之上水平 | 开始时折叠，在断点之上水平 |
| 容器宽度 | 无（自动） | 540px | 720px | 960px | 1140px |
| 适用于 | 竖屏手机 | 横屏手机 | 平板电脑 | 笔记本电脑 | 笔记本电脑和台式机 |
| 列数 | 12 | 12 | 12 | 12 | 12 |
| 沟槽宽度 | 30px（每列两侧各 15px） | 30px（每列两侧各 15px） | 30px（每列两侧各 15px） | 30px（每列两侧各 15px） | 30px（每列两侧各 15px） |
| 可嵌套 | 是 | 是 | 是 | 是 | 是 |
| 偏移量 | 是 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 | 是 |
示例
接下来的章节将展示针对不同设备和屏幕宽度的网格系统示例
