返回列表 发帖

Bootstrap 5 网格系统

网格系统
Bootstrap 的网格系统是用 flexbox 构建的,页面上最多允许 12 列。

如果您不想单独使用所有 12 列,您可以将这些列组合在一起以创建更宽的列:


网格系统响应迅速,列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12(不需要使用所有 12 个可用列)。

网格类
Bootstrap 5 网格系统提供六个类:

.col- (超小型设备 - 屏幕宽度小于 576px)
.col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
.col-md- (中型设备 - 屏幕宽度等于或大于 768px)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
.col-xl- (超大型设备 - 屏幕宽度等于或大于 1200px)
.col-xxl- (特大型设备 - 屏幕宽度等于或大于 1400px)
组合上述类,可创建更动态和灵活的布局。

提示:每个类都是按比例放大的,所以如果你想为 sm 和 md 设置相同的宽度,你只需要规定 sm。

Bootstrap 5 网格的基本结构
以下是 Bootstrap 5 网格的基本结构:

<!-- 控制列宽,以及它们在不同设备上的显示方式 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
亲自试一试
第一个例子:创建一行(<div class = "row">)。然后,添加所需数量的列(带有 .col-*-* 类的标签)。第一颗星 (*) 代表响应度:sm、md、lg、xl 或 xxl,而第二颗星代表一个数字,每行加起来应为 12。

第二个例子:不是给每个 col 添加一个数字,而是让 bootstrap 处理布局,来创建等宽的列:两个 "col" 元素 = 每个列的 50% 宽度,而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。

网格选项
下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作:

超小型 (<576px)        小型 (>=576px)        中型 (>=768px)        大型 (>=992px)        超大型 (>=1200px)        特大型 (>=1400px)
类前缀        .col-        .col-sm-        .col-md-        .col-lg-        .col-xl-        .col-xxl-
网格行为        始终水平        折叠开始,在断点之上水平        折叠开始,在断点之上水平        折叠开始,在断点之上水平        折叠开始,在断点之上水平        折叠开始,在断点之上水平
容器宽度        None (auto)        540px        720px        960px        1140px        1320px
适用于        手机竖屏        手机横屏        平板电脑        笔记本电脑        笔记本电脑和台式机        笔记本电脑和台式机
列的 #        12        12        12        12        12        12
Gutter 宽度        1.5rem (在列的每侧 .75rem )        1.5rem (在列的每侧 .75rem )        1.5rem (在列的每侧 .75rem )        1.5rem (在列的每侧 .75rem )        1.5rem (在列的每侧 .75rem )        1.5rem (在列的每侧 .75rem )
可嵌套        Yes        Yes        Yes        Yes        Yes        Yes
偏移        Yes        Yes        Yes        Yes        Yes        Yes
列排序        Yes        Yes        Yes        Yes        Yes        Yes

返回列表