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 教程。
请注意，Flexbox 在 IE9 及更早版本中不受支持。
如果您需要 IE8-9 支持，请使用 Bootstrap 3. 它是 Bootstrap 最稳定的版本，并且团队仍在对其进行维护，以修复关键错误和更新文档。但是，它不会添加任何新功能。
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" 元素 = 每个 col 占 50% 的宽度。三个 col = 每个 col 占 33.33% 的宽度。四个 col = 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) |
| 嵌套 | 是 | 是 | 是 | 是 | 是 |
| 偏移 | 是 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 | 是 |
示例
接下来的章节将展示不同设备和屏幕宽度的网格系统示例
