Bootstrap4 网格示例


下面我们收集了一些 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 个可用列):

第 4 栏
第 4 栏
第 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% 分割:

第 3 栏
第 6 栏
第 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
第 6 栏
col

示例

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

相等的列

1 个(共 2 个)
2 共 2 个
1 个(共 4 个)
2 共 4 个
3 共 4 个
4 共 4 个
1 共 6 个
2 共 6 个
3 共 6 个
4 共 6 个
5 共 6 个
6 共 6 个

示例

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<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>

<!-- Six equal columns -->
<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 个(共 2 个)
2 共 2 个
1 个(共 4 个)
2 共 4 个
3 共 4 个
4 共 4 个
1 共 6 个
2 共 6 个
3 共 6 个
4 共 6 个
5 共 6 个
6 共 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 个(共 2 个)
2 共 2 个
1 个(共 4 个)
2 共 4 个
3 共 4 个
4 共 4 个
1 个(共 4 个)
2 共 4 个
3 共 4 个
4 共 4 个

示例

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<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>

<!-- Setting two column widths -->
<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 坐 amet,cibo sensibus interesset 不坐。 Et dolor possim volutpat qui。没有马里斯托利特伊里乌雷伊姆,et vel tale zril blandit,rebum vidisse nostrum qui eu。 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>
亲自试一试 »

嵌套列

8 号栏
第 6 栏
第 6 栏
第 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-(超小型设备 - 屏幕宽度小于 576 像素)
  • .col-sm-(小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md-(中型设备 - 屏幕宽度等于或大于 768px)
  • .col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素)
  • .col-xl-(超大设备 - 屏幕宽度等于或大于 1200 像素)

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

提示:每个类都会按比例放大,因此如果您希望为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% split on extra small devices and 75%/25% split on larger devices -->
<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% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<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% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (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 sat amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。
Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sat voluptatem Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illoinvente veritatis et quasi architobeatae vitae dicta sunt explicabo.

示例

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