Bootstrap 的响应式网格系统

#Bootstrap ·2025-08-19 10:06:40

Bootstrap 的响应式网格系统是其布局的核心功能，基于 12列流体栅格 和 断点系统，可快速构建适应不同设备的页面布局。以下是详细使用指南：

1. 网格系统基础

核心要素

• 容器（Container）：包裹整个网格的父元素，提供对齐和内边距。

<div class="container"> <!-- 固定宽度 + 响应式 -->
  <!-- 内容 -->
</div>
<!-- 或 -->
<div class="container-fluid"> <!-- 100% 宽度 -->
  <!-- 内容 -->
</div>

• 行（Row）：水平分组列，抵消容器的内边距。

<div class="row">
  <!-- 列放在这里 -->
</div>

• 列（Column）：实际内容容器，通过类名控制宽度。

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

2. 响应式断点与列类

Bootstrap 提供 5个断点，对应不同设备尺寸：

列类命名规则

<div class="col-{断点}-{列数}"></div>

• 示例：

<!-- 平板及以上占6列（容器分2列排列），手机占12列（容器单列排列） -->
<div class="col-md-6 col-12">内容</div>

3. 常用布局模式

等宽列

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

指定列宽

<div class="row">
  <div class="col-md-8">主内容区（8/12）</div>
  <div class="col-md-4">侧边栏（4/12）</div>
</div>

混合响应式

<div class="row">
  <!-- 大屏：3等分 | 平板：2列（6+6） | 手机：堆叠 -->
  <div class="col-lg-4 col-md-6">区块1</div>
  <div class="col-lg-4 col-md-6">区块2</div>
  <div class="col-lg-4 col-md-12">区块3</div>
</div>

4. 高级功能

列偏移（Offset）

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

嵌套网格

<div class="row">
  <div class="col-md-8">
    <div class="row"> <!-- 嵌套新行 -->
      <div class="col-md-6">嵌套左</div>
      <div class="col-md-6">嵌套右</div>
    </div>
  </div>
</div>

垂直对齐

<div class="row align-items-center"> <!-- 居中 -->
  <div class="col">内容</div>
</div>

水平对齐

<div class="row justify-content-between"> <!-- 两端对齐 -->
  <div class="col-4">左</div>
  <div class="col-4">右</div>
</div>

5. 实用技巧

a.间距控制：

• 使用 g-*（Bootstrap 5）或 no-gutters（Bootstrap 4）调整列间距。

<div class="row g-3"> <!-- 列间16px间距 -->

b.显示/隐藏列：

• 结合 d-{断点}-none/block 控制列可见性。

<div class="col-md-6 d-none d-lg-block">大屏显示</div>

c.顺序调整：

• 使用 order-* 类改变列顺序。

<div class="col order-md-2">在平板及以上排第二</div>

6. 代码示例（完整案例）

<div class="container">
  <!-- 响应式导航+内容布局 -->
  <div class="row">
    <!-- 侧边栏：大屏显示3列，手机隐藏 -->
    <aside class="col-lg-3 d-none d-lg-block">
      <h4>侧边栏</h4>
    </aside>

    <!-- 主内容：大屏9列，平板以上8列，手机12列 -->
    <main class="col-lg-9 col-md-8 col-12">
      <div class="row g-3">
        <div class="col-md-6 col-12">
          <div class="card">卡片1</div>
        </div>
        <div class="col-md-6 col-12">
          <div class="card">卡片2</div>
        </div>
      </div>
    </main>
  </div>
</div>

注意事项

1. 总列数不超过12：每行的列数总和建议≤12，超出的列会自动换行。
2. 移动优先：默认样式针对手机设计，通过断点类逐步增强大屏布局。
3. Bootstrap 4 vs 5：

• Bootstrap 5 移除了 -xs 后缀（直接用 col-*），新增 -xxl 断点。