Bootstrap 4 网格实例

下面我们收集了一些基本 Bootstrap 4 网格布局的示例。


三个等宽列

在指定数量的元素上使用 .col 类, Bootstrap 将识别有多少元素(并创建等宽列)。在下面的示例中,我们使用三个 col 元素,每个元素的宽度为33.33%。

col
col
col

实例

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
亲自试一试 »

使用数字的三个等宽列

还可以使用数字来控制列宽。只需确保总和为12或更少(不要求使用所有12个可用列):

col-4
col-4
col-4

实例

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>
亲自试一试 »

三个不同宽度的列

要创建不同宽度的列,必须使用数字。以下示例将创建 25%/50%/25% 的拆分:

col-3
col-6
col-3

实例

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>
亲自试一试 »


只设置一个列宽

还可以只需设置一列的宽度,并让同级列围绕它自动调整大小就可以了。以下示例将创建 25%/50%/25% 的拆分:

col
col-6
col

实例

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>
亲自试一试 »

更多等宽的列

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

实例

<!-- 两个相等的列 -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- 四个相等的列 -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- 六个相等的列 -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>
亲自试一试 »

行列

您还可以使用 .row-cols-* 类控制应该相邻显示的列数(无论有多少列):

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

实例

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>
亲自试一试 »

更多不等宽的列

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 4
2 of 4
3 of 4
4 of 4

实例

<!-- 两列不等 -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- 四列不等 -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- 设置两个列宽 -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
亲自试一试 »

等高

如果其中一列比另一列高(由于文本或 CSS 高度),其余列将跟随:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col
col

实例

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
亲自试一试 »

嵌套列

col-8
col-6
col-6
col-4

以下示例显示了如何创建两列布局,其中一列内有另外两列:

实例

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>
亲自试一试 »

响应类

Bootstrap 4 网格系统有五个响应类:

  • .col- (超小型设备-屏幕宽度小于576px)
  • .col-sm- (小型设备-屏幕宽度等于或大于576px)
  • .col-md- (中等设备-屏幕宽度等于或大于768px)
  • .col-lg- (大型设备-屏幕宽度等于或大于992px)
  • .col-xl- (特大型设备-屏幕宽度等于或大于1200px)

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

提示: 每个类都会向上扩展,因此如果希望为 smmd 设置相同的宽度,只需指定 sm 即可。


水平堆叠

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

以下示例显示了如何创建一个列布局,该布局从堆叠在超小型设备上开始,然后在大型设备(sm、md、lg 和 xl)上变为水平:

实例

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>
亲自试一试 »

混合与匹配

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

实例

<!-- 在超小型设备上分配 50%/50%,在大型设备上分配 75%/25% -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 在超小型、小型和中型设备上分配 58%/42%,在大型和超大型设备上分配 66.3%/33.3% -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 在小型设备上分配 25%/75%,在中型设备上分配 50%/50%,在大型和超大型设备上分配 33%/66%。 在超小型设备上,它将自动堆叠 (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
亲自试一试 »

无间隙宽度

.no-gutters 类添加到 .row 容器中,可以删除间隙宽度(额外空间):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

实例

<div class="row no-gutters">
亲自试一试 »