Bootstrap4 网格系统

Bootstrap 4 网格系统

Bootstrap 的网格系统允许页面上最多有 12 列。

如果您不想单独使用所有 12 列，可以将这些列分组在一起以创建更宽的列：

跨度 1

跨度 4

跨度 8

跨度 6

跨度 12

Bootstrap 的网格系统是响应式的，并且列会根据屏幕大小重新排列：在大屏幕上，将内容组织成三列可能看起来更好，但在小屏幕上，如果内容项堆叠起来会更好在彼此之上。

网格类

Bootstrap 4 网格系统有五个类：

.col-（超小型设备 - 屏幕宽度小于 576 像素）
.col-sm-（小型设备 - 屏幕宽度等于或大于 576px）
.col-md-（中型设备 - 屏幕宽度等于或大于 768px）
.col-lg-（大型设备 - 屏幕宽度等于或大于 992 像素）
.col-xl-（超大设备 - 屏幕宽度等于或大于 1200 像素）

可以组合上面的类来创建更加动态和灵活的布局。

提示：每个类都会按比例放大，因此如果您希望为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 的一大优点是没有指定宽度的网格列将自动布局为"equal width columns"（且高度相等）。示例：三个元素.col-sm从小断点开始，每个宽度都会自动变为 33.33%。提示：如果您想了解有关 Flexbox 的更多信息，您可以阅读我们的CSS Flexbox 教程。

请注意，IE9 及更早版本不支持 Flexbox。

如果您需要 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>


<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 网格系统如何在不同屏幕尺寸上工作：

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Grid behaviour	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	540px	720px	960px	1140px
Suitable for	Portrait phones	Landscape phones	Tablets	Laptops	Laptops and Desktops
# of columns	12	12	12	12	12
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes	Yes

示例

接下来的章节展示了针对不同设备和屏幕宽度的网格系统示例：