Bootstrap 网格系统

定义和使用

Bootstrap 的网格系统是使用 flexbox 构建的，并且整个页面最多允许 12 列。

如果不想单独使用全部 12 列，则可以将这些列组合在一起以创建更宽的列：

span 1

span 4

span 8

span 6

span 12

Bootstrap 的网格系统具有响应能力，并且各列将根据屏幕大小进行重新排列：在大屏幕上，将内容分为三列可能看起来更好，但是在小屏幕上，如果将内容项堆叠在一起，则效果会更好在彼此之上。

网格类别

Bootstrap 网格系统具有五类：

.col-（超小型设备-屏幕宽度<576px）
.col-sm-（小型设备-屏幕宽度>=576px）
.col-md-（中等设备-屏幕宽度>=768px）
.col-lg-（大型设备-屏幕宽度>=992px）
.col-xl-（特大设备-屏幕宽度>=1200px）

可以将上述类组合在一起以创建更多动态和灵活的布局。

提示：每个类都按比例增加，因此，如果您希望为 sm 和 md 设置相同的宽度，则只需指定 sm。

网格系统规则

一些 Bootstrap 网格系统规则：

必须将行放置在.container（固定宽度）或 .container-fluid（全屏宽）内，以便正确对齐和填充。
使用行创建水平列组
内容应放在列中，并且只有列可以是行的直接子代
预定义的类（例如.row和.col-sm-4）可用于快速制作网格布局
列通过填充创建装订线（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移
通过指定希望跨越的12个可用列的数量来创建网格列。例如，三个相等的列将使用三个 .col-sm-4
列的宽度以百分比表示，因此它们始终相对于其父元素是可变的且大小合适
Bootstrap 3 和 Bootstrap 4 之间的最大区别在于，Bootstrap 4 现在使用 flexbox，而不是 float。 flexbox的一大优势在于，没有指定宽度的网格列将自动布局为“等宽列”（和等高）。示例：具有 .col-sm 的三个元素从小断点开始的宽度将自动增加33.33％。提示：如果要了解有关 Flexbox 的更多信息，请阅读我们的 CSS Flexbox 教程。

请注意，IE9和更早版本不支持Flexbox；如果需要IE8-9支持，请使用Bootstrap3。Bootstrap3是Bootstrap的最稳定的版本，团队仍然支持它进行重要的错误修正和文档更改。但是，不会添加任何新功能。

网格的基本结构

下面示例演示了 Bootstrap 网格的基本结构：

<！-控制列宽以及它们在不同设备上的显示方式->
<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>
<！-或者让Bootstrap自动处理布局->
<div class="row">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

第一个示例：创建一行（<div class="row">）。然后，添加所需的列数（带有适当的 .col-*-* 类的标签）。第一个星号（*）代表响应度：sm，md，lg 或 xl，而第二个星号则代表一个数字，每行总计为 12。

第二个示例：让引导程序处理布局，而不是给每个 col 添加数字，以创建相等宽度的列：两个 "col" 元素=每个 col 的宽度为 50％。三个列=每个列的宽度为 33.33％。四个 cols = 25％ 的宽度等。您还可以使用 .col-sm | md | lg | xl 使列具有响应性。

网格选项

下表总结了 Bootstrap 网格系统如何在不同屏幕尺寸上工作：

	特小屏幕 <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）
可嵌套	是	是	是	是	是
可偏移	是	是	是	是	是
可列排序	是	是	是	是	是