Bootstrap5 网格特大号

超大网格示例

	XSmall	Small	Medium	Large	Extra Large	XXL
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Screen width	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px

在上一章中，我们介绍了一个网格示例，其中包含小型、中型和大型设备的类。我们使用了两个 div（列），并在小型设备上给它们 25%/75% 的分割，在中型设备上给它们 50%/50% 的分割，在大型设备上给它们 33%/66% 的分割：

但在超大设备上，20%/80% 分割的设计可能会更好。

超大设备被定义为屏幕宽度为1200像素及以上。

对于 xlarge 设备，我们将使用.col-xl-*课程：

以下示例将导致小型设备上 25%/75% 的分割、中型设备上 50%/50% 的分割、大型设备上 33%/66% 的分割以及 xlarge 和 xxlarge 上 20%/80% 的分割设备。在超小型设备上，它将自动堆叠（100%）：

col-sm-3 col-md-6 col-lg-4 col-xl-2

col-sm-9 col-md-6 col-lg-8 col-xl-10

示例

<div class="container-fluid">
<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

亲自试一试 »

笔记：确保总和始终为 12。

仅使用 XLarge

在下面的例子中，我们只指定.col-xl-6类（无.col-lg-*,.col-md-*和/或.col-sm-*）。这意味着 xlarge 和 xxlarge 设备将分成 50%/50%。但是，对于大型、中型、小型和超小型设备，它将垂直堆叠（100% 宽度）：

示例

<div class="container-fluid">
<div class="row">
    <div class="col-xl-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-xl-6">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

亲自试一试 »

自动布局列

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

如果屏幕尺寸是小于 1200 像素，列将水平堆叠：

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


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

1 个（共 2 个）

2 共 2 个

1 个（共 4 个）

2 共 4 个

3 共 4 个

4 共 4 个

亲自试一试 »