Bootstrap 5 网格实例

下面我们整理了一些 Bootstrap 5 网格布局的实例。

三等分列

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

实例

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

亲自试一试

使用数字的三个相等的列

您还可以使用数字来控制列宽。只需确保总和等于或小于 12(不需要使用所有 12 个可用列):

实例

<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% 的拆分:

实例

<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% 的拆分:

实例

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

亲自试一试

更多相等的列

实例

<!-- 两个相等的列 -->
<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

您还可以使用 .row-cols-* 类控制应该出现在彼此旁边的列数(无论有多少列):

实例

<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>

亲自试一试

更多不等列

实例

<!-- 两个不相等的列 -->
<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>

<!-- 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 高度),其余的将跟随:

实例

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

亲自试一试

嵌套的列

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

实例

<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 5 网格系统有五个类:

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

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

提示:每个类都按比例放大,因此如果您希望为 smmd 设置相同的宽度,则只需指定 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>

亲自试一试

Mix 和 Match

实例

<!-- 在超小型设备上 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>

亲自试一试

无 gutter

如需更改列之间的间距(额外的空间),请使用任何 .g-1|2|3|4|5 类(.g-4 是默认值)。

如需完全删除装订线(gutter),请使用 .g-0

实例

<div class="row g-0">

亲自试一试