Bootstrap5 网格系统

以下是关于 Bootstrap 5 网格系统（Grid System） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 Bootstrap 5 的网格系统。

Bootstrap 5 网格系统（Grid System）指南

什么是网格系统

网格系统（Grid System） 是 Bootstrap 5 的核心布局工具，基于 Flexbox 的 12 列系统。它通过容器（.container）、行（.row）和列（.col-*）实现灵活的响应式布局，适用于各种设备尺寸。

出站链接：查看 Bootstrap 5 Grid System 官方文档。

基本使用

HTML 结构

网格系统使用 .container 包裹内容，.row 定义行，.col-* 定义列。

基本示例

以下是一个简单的两列布局：

<div class="container">
  <div class="row">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
  </div>
</div>

.container：固定宽度容器。
.row：行容器，管理列。
.col：平均分配列宽。

高级用法

断点与响应式

Bootstrap 5 定义了以下断点：

xs（<576px）：超小屏
sm（≥576px）：小屏
md（≥768px）：中屏
lg（≥992px）：大屏
xl（≥1200px）：超大屏
xxl（≥1400px）：超超大屏

通过 .col-{breakpoint}-{size} 指定不同屏幕下的列宽。

示例代码：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">列 1</div>
    <div class="col-12 col-md-6 col-lg-8">列 2</div>
  </div>
</div>

col-12：小屏以下占满一行。
col-md-6：中屏占 6 列（半宽）。
col-lg-4：大屏占 4 列。

列偏移

使用 .offset-* 类偏移列。

示例代码：

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

.offset-md-4：中屏及以上偏移 4 列。

列排序

使用 .order-* 类调整列顺序。

示例代码：

<div class="container">
  <div class="row">
    <div class="col order-2">第一个（显示为第二个）</div>
    <div class="col order-1">第二个（显示为第一个）</div>
  </div>
</div>

.order-1、.order-2：调整显示顺序。
支持响应式：.order-md-1。

嵌套网格

在列中嵌套新的行和列。

示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-6">嵌套列 1</div>
        <div class="col-6">嵌套列 2</div>
      </div>
    </div>
    <div class="col-md-4">主列 2</div>
  </div>
</div>

间距控制

通过 .g-* 类控制行间距，或使用工具类调整内外边距。

示例代码：

<div class="container">
  <div class="row g-4">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
  </div>
</div>

.g-4：设置列间距。
其他工具类：.m-*（外边距）、.p-*（内边距）。

自定义网格

通过 CSS 或 Sass 修改网格行为。

示例代码（CSS）：

<style>
  .custom-row {
    --bs-gutter-x: 3rem; /* 自定义水平间距 */
  }
  .custom-col {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
  }
</style>

<div class="container">
  <div class="row custom-row">
    <div class="col custom-col">自定义列 1</div>
    <div class="col custom-col">自定义列 2</div>
  </div>
</div>

Sass 定制：

$grid-columns: 16; // 修改为 16 列
$grid-gutter-width: 2rem; // 修改间距
@import "bootstrap/scss/bootstrap";

出站链接：参考 Bootstrap 5 自定义网格。

注意事项

依赖性：网格系统不需 JavaScript，仅依赖 CSS（Flexbox）。
可访问性：确保内容逻辑清晰，避免仅依赖视觉布局。
断点测试：在不同设备上测试响应式效果。
列总数：一行内列宽总和不超过 12，否则会换行。

参考资料

以下是与 Bootstrap 5 Grid System 相关的外部资源：

总结

Bootstrap 5 的网格系统是一个强大且灵活的布局工具，通过 12 列系统和响应式断点，您可以轻松实现跨设备的复杂布局。结合间距控制和自定义选项，它适用于各种设计需求。如果您有具体问题或场景，请随时告诉我！