Bootstrap 4 网格系统 - Bootstrap 4 基础教程

Bootstrap 4 采用移动优先的设计原则，提供了一套响应式的流式网格系统

采用 Bootstrap 4 设计的页面会随着屏幕或视口 (viewport )尺寸的增加，系统会自动分为最多 12 列

当然，我们也可以根据自己的需要，重新定义列数目

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

网格 CSS 类

Bootstrap 4 网格系统有以下 5 个类

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

上面这些 CSS 类可以一起使用，从而创建更灵活的页面布局

下表列出 Bootstrap 网格系统如何跨多个设备工作

	超小设备 < 576px	平板 ≥ 576px	桌面显示器 ≥ 768px	大桌面显示器 ≥ 992px	超大桌面显示器 ≥ 1200px
容器最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数量和	12
间隙宽度	30px (一个列的每边分别 15px)
可嵌套	Yes
列排序	Yes

Bootstrap 4 网格的基本结构

使用 Bootstrap 4 的网格布局的一面一般结构如下

精确控制列的宽度及在不同的设备上如何显示

<div class="row">
  <div class="col-*-*"></div>
</div>
<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

让 Bootstrap 者自动处理布局

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

上面的代码不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等：

两个 "col" ，每个就为 50% 的宽度
三个 "col" 每个就为 33.33% 的宽度
四个 "col" 每个就为 25% 的宽度

以此类推

同样，我们也可以使用 .col-sm|md|lg|xl 来设置列的响应规则

根据上面的解释，我们就可以创建一些常见的页面布局了

创建相等宽度的列，Bootstrap 自动布局

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

运行范例 »

等宽响应式列

下面的代码可以在在平板及更大屏幕上创建等宽度的响应式列

在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

运行范例 »

不等宽响应式列

下面的代码在平板及更大屏幕上创建不等宽度的响应式列

在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

运行范例 »