Bootstrap 5 大型网格

大型设备网格实例

  超小设备 小型设备 中型设备 大型设备 特大设备 超大设备
Class 前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
屏幕宽度 <576px >=576px >=768px >=992px >=1200px >=1400px

在前一章中,我们介绍了一个网格示例,其中包含了中小型设备的类。我们使用了两个div(列),我们在小型设备上给了它们 25%/75% 的分割,在中型设备上给了它 50%/50% 的分割:

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

但在大型设备上 33%/66% 的拆分设计效果可能会更好。

大型设备被定义为屏幕宽度从 992 px 到 1199 px

对于大型设备,我们将使用 .col-lg-* 类:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

现在 Bootstrap 会说 "在小型设备,寻找包含 -sm- 的类并使用它们。在中型设备的情况下,看看里面有 -md- 的类并使用它们。在大型设备的情况下,看看里面有 -lg- 的类并使用它们"。

以下示例将导致小型设备的拆分比例为 25%/75%,中型设备的拆分比例为 50%/50%,大型、特大型和超大型设备的拆分比例为 33%/66%。在超小型设备上,它会自动堆叠(100%):

.col-sm-3 .col-md-6 .col-lg-4
.col-sm-9 .col-md-6 .col-lg-8

实例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
亲自试一试 »

注释: 请确保每一行中列的总和等于或小于 12:


只使用大型类

在下面的示例中,我们只指定 .col-lg-6 类 (不含 .col-md-*.col-sm-*)。这意味着大型、特大型或超大型设备将分成 50%/50%。但是,对于中小型和超小型设备,它将垂直堆叠(100%宽度):

实例

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
亲自试一试 »


自动布局等宽列

在 Bootstrap 5 中,有一种简单的方法可以为所有设备创建等宽列:只需删除 .col-lg-* 中的数字,并且只在指定数量的列元素上使用 .col-lg 类。Bootstrap 将识别有多少列,并且每一列的宽度相同。

如果屏幕尺寸 小于 992px, 列将水平堆叠:

<!-- 两列:50% 宽度在大和向上-->
<div class="row">
  <div class="col-lg">1 of 2</div>
 <div class="col-lg">2 of 2</div>
</div>

<!-- 四列:25% 宽度,大号及以上 -->
<div class="row">
  <div class="col-lg">1 of 4</div>
 <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>
1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4
亲自试一试 »