Bootstrap 5 网格系统基础

Bootstrap 5 网格系统基于 Flexbox 构建，提供响应式布局方案。网格系统由容器（container）、行（row）和列（col）组成，支持 12 列布局。

容器分为固定宽度（.container）和全宽度（.container-fluid）。行（.row）用于包裹列，列（.col-*）用于定义内容宽度。

响应式断点

Bootstrap 5 提供五个响应式断点，对应不同屏幕尺寸：

• xs（默认）：<576px
• sm：≥576px
• md：≥768px
• lg：≥992px
• xl：≥1200px
• xxl：≥1400px

列类命名规则

列类命名遵循 col-{breakpoint}-{span} 格式：

<div class="col-md-6 col-lg-4">内容</div>

省略断点时默认为 xs，如 .col-12 在所有屏幕下占 12 列。

自动布局列

使用 .col 类可实现自动分配宽度：

<div class="row">
  <div class="col">自动宽度</div>
  <div class="col">自动宽度</div>
</div>

嵌套网格

网格支持嵌套，需在列内添加新的 .row 和 .col-*：

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-6">嵌套列</div>
    </div>
  </div>
</div>

对齐方式

Flexbox 提供多种对齐方式：

垂直对齐：

<div class="row align-items-start">顶部对齐</div>
<div class="row align-items-center">居中对齐</div>

水平对齐：

<div class="row justify-content-start">左对齐</div>
<div class="row justify-content-center">居中对齐</div>

间距工具

Bootstrap 5 提供间距工具类：

<div class="row g-3"> <!-- 列间距 1rem -->
  <div class="col">有间距的列</div>
</div>

偏移列

使用 .offset-* 类实现列偏移：

<div class="row">
  <div class="col-md-4 offset-md-4">居中列</div>
</div>

列排序

通过 .order-* 类调整列顺序：

<div class="row">
  <div class="col order-2">第二列</div>
  <div class="col order-1">第一列</div>
</div>

实用示例

三列响应式布局：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">移动设备 12 列，桌面 4 列</div>
    <div class="col-6 col-md-4">移动设备 6 列，桌面 4 列</div>
    <div class="col-6 col-md-4">移动设备 6 列，桌面 4 列</div>
  </div>
</div>