Bootstrap 5 超大型网格
超大型设备网格实例
| 超小设备 | 小型设备 | 中型设备 | 大型设备 | 特大设备 | 超大型设备 | |
|---|---|---|---|---|---|---|
| Class 前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 屏幕宽度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
超大设备的定义是屏幕宽度在 1400 px像素及以上。
以下示例将导致中型、大型和特大设备上的50%/50%拆分，以及特大型设备上的25%/75%拆分。在小型和超小型设备上，它将自动堆叠（100%）:
col-md-6 col-xxl-3
col-md-6 col-xxl-9
实例
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
亲自试一试 »
注释: 请确保每一行中列的总和等于或小于 12。
只使用超大型类
在下面的示例中，我们只指定 .col-xxl-6 类 (不含 .col-md-*, and/or .col-sm-*)。
这意味着超大型设备将分成50%/50%。但是，对于特大型、大型、中型、小型和超小型设备，它将垂直堆叠（100%宽度）:
实例
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
亲自试一试 »
自动布局等宽列
在 Bootstrap 4 中，有一种简单的方法可以为所有设备创建等宽列:只需删除 .col-xxl-* 中的数字，
并且只在指定数量的列元素上使用 .col-xxl 类。Bootstrap 将识别有多少列，并且每一列的宽度相同。
如果屏幕尺寸 小于 1400px, 列将水平堆叠:
<!-- 两列:xxl 及以上宽度为 50%-->
<div class="row">
<div class="col-xxl">1 of 2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- 四列:xxl 及以上宽度为 25% -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3 of 4</div>
<div class="col-xxl">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
