Bootstrap 网格

网格系统

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

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

span 1

span 4

span 8

span 6

span 12

网格系统是响应式的，列将根据屏幕大小自动重新排列。

确保总和不超过12个（不需要使用所有12个可用列）。

网格类别

Bootstrap 网格系统具有五类：

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

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

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

网格的基本结构

下面示例演示了 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 使列具有响应性。

三列相等

.col

以下示例显示如何在所有设备和屏幕宽度上创建三个等宽列：

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

尝试一下

响应列

.col-sm-3

以下示例显示了如何创建四个等宽列，这些列从平板电脑开始并扩展到超大型桌面。在宽度 <576px 的手机或屏幕上，这些列将自动堆叠在一起：

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

尝试一下

两个不相等的响应列

.col-sm-4

.col-sm-8

以下示例显示如何获取两个不同宽度的列，这些列从平板电脑开始并扩展到大型额外的台式机：

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

尝试一下

网格系统

网格类别

网格的基本结构

三列相等

响应列

两个不相等的响应列

相关页面