Bootstrap 栅格系统 #

栅格系统是 Bootstrap 的核心，它提供了一套响应式、移动优先的布局方案，帮助你轻松创建各种复杂的页面布局。

栅格系统概述 #

什么是栅格系统？ #

栅格系统是一种通过行（row）和列（column）来创建页面布局的系统。Bootstrap 使用 12 列栅格系统，将页面水平分成 12 个等宽的列。

text

┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                                                                                         12 列栅格系统                                                                                                         │
├──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┤
│  1   │  2   │  3   │  4   │  5   │  6   │  7   │  8   │  9   │  10  │  11  │  12  │
└──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘

栅格系统的组成 #

栅格系统由三个主要部分组成：

text

┌─────────────────────────────────────────────────┐
│                 Container（容器）                 │
│  ┌───────────────────────────────────────────┐  │
│  │              Row（行）                      │  │
│  │  ┌─────────┬─────────┬─────────┐          │  │
│  │  │ Column  │ Column  │ Column  │          │  │
│  │  │  (列)   │  (列)   │  (列)   │          │  │
│  │  └─────────┴─────────┴─────────┘          │  │
│  └───────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘

组件	类名	作用
容器	`.container`	包裹内容，提供响应式宽度
行	`.row`	创建列的水平组
列	`.col-*`	定义每列的宽度

响应式断点 #

Bootstrap 定义了 6 个响应式断点：

断点	类前缀	最小宽度	最大容器宽度
Extra small	-	< 576px	自动
Small	`sm`	≥ 576px	540px
Medium	`md`	≥ 768px	720px
Large	`lg`	≥ 992px	960px
Extra large	`xl`	≥ 1200px	1140px
Extra extra large	`xxl`	≥ 1400px	1320px

断点可视化 #

text

Extra Small (xs)          Small (sm)              Medium (md)             Large (lg)              Extra Large (xl)        Extra Extra Large (xxl)
< 576px                   ≥ 576px                 ≥ 768px                 ≥ 992px                 ≥ 1200px                ≥ 1400px
├─────────────────────────┼───────────────────────┼───────────────────────┼───────────────────────┼───────────────────────┼───────────────────────┤
       手机竖屏                   手机横屏                  平板                    桌面                    大桌面                  超大屏幕

容器类型 #

固定容器 #

html

<div class="container">
  <p>固定宽度容器，在不同断点有不同的最大宽度</p>
</div>

断点	容器宽度
< 576px	100%
≥ 576px	540px
≥ 768px	720px
≥ 992px	960px
≥ 1200px	1140px
≥ 1400px	1320px

流式容器 #

html

<div class="container-fluid">
  <p>始终占满视口宽度</p>
</div>

响应式容器 #

html

<!-- 在 sm 断点前 100% 宽度，之后固定 -->
<div class="container-sm">Small 容器</div>
<div class="container-md">Medium 容器</div>
<div class="container-lg">Large 容器</div>
<div class="container-xl">Extra Large 容器</div>
<div class="container-xxl">Extra Extra Large 容器</div>

基础用法 #

等宽列 #

html

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

指定列宽 #

html

<div class="container">
  <div class="row">
    <div class="col-8">占 8 列</div>
    <div class="col-4">占 4 列</div>
  </div>
  <div class="row">
    <div class="col-4">占 4 列</div>
    <div class="col-4">占 4 列</div>
    <div class="col-4">占 4 列</div>
  </div>
</div>

混合布局 #

html

<div class="container">
  <div class="row">
    <div class="col-12">占满整行</div>
  </div>
  <div class="row">
    <div class="col-6">占 6 列</div>
    <div class="col-6">占 6 列</div>
  </div>
  <div class="row">
    <div class="col-3">占 3 列</div>
    <div class="col-6">占 6 列</div>
    <div class="col-3">占 3 列</div>
  </div>
</div>

响应式布局 #

单断点 #

html

<div class="container">
  <div class="row">
    <!-- 手机上占满 12 列，平板及以上占 6 列 -->
    <div class="col-12 col-md-6">内容 1</div>
    <div class="col-12 col-md-6">内容 2</div>
  </div>
</div>

多断点 #

html

<div class="container">
  <div class="row">
    <!--
      手机：占满 12 列
      平板：占 6 列
      桌面：占 4 列
      大桌面：占 3 列
    -->
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">内容</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">内容</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">内容</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">内容</div>
  </div>
</div>

常见布局模式 #

两栏布局（侧边栏 + 主内容） #

html

<div class="container">
  <div class="row">
    <aside class="col-12 col-md-3">
      侧边栏（手机占满，桌面占 3 列）
    </aside>
    <main class="col-12 col-md-9">
      主内容（手机占满，桌面占 9 列）
    </main>
  </div>
</div>

三栏布局 #

html

<div class="container">
  <div class="row">
    <aside class="col-12 col-md-2">左侧栏</aside>
    <main class="col-12 col-md-8">主内容</main>
    <aside class="col-12 col-md-2">右侧栏</aside>
  </div>
</div>

圣杯布局 #

html

<div class="container">
  <header class="row">
    <div class="col-12">页头</div>
  </header>
  <div class="row">
    <nav class="col-12 col-md-3 order-md-1">导航</nav>
    <main class="col-12 col-md-6 order-md-2">主内容</main>
    <aside class="col-12 col-md-3 order-md-3">侧边栏</aside>
  </div>
  <footer class="row">
    <div class="col-12">页脚</div>
  </footer>
</div>

高级特性 #

自动布局列 #

使用 .col-auto 让列宽度根据内容自动调整：

html

<div class="row">
  <div class="col">自动填充剩余空间</div>
  <div class="col-auto">根据内容宽度</div>
</div>

列偏移 #

使用 .offset-* 类将列向右偏移：

html

<div class="row">
  <div class="col-4">占 4 列</div>
  <div class="col-4 offset-4">占 4 列，偏移 4 列</div>
</div>

<div class="row">
  <div class="col-3 offset-3">偏移 3 列</div>
  <div class="col-3 offset-3">偏移 3 列</div>
</div>

响应式偏移：

html

<div class="row">
  <div class="col-md-4 offset-md-4">
    在 md 断点及以上偏移 4 列
  </div>
</div>

列排序 #

使用 .order-* 类改变列的显示顺序：

html

<div class="row">
  <div class="col order-3">第一，显示为第三</div>
  <div class="col order-1">第二，显示为第一</div>
  <div class="col order-2">第三，显示为第二</div>
</div>

使用 .order-first 和 .order-last：

html

<div class="row">
  <div class="col">第一个</div>
  <div class="col order-first">显示在最前</div>
  <div class="col order-last">显示在最后</div>
</div>

响应式排序：

html

<div class="row">
  <div class="col-12 col-md-4 order-2 order-md-1">
    手机上排第二，桌面排第一
  </div>
  <div class="col-12 col-md-8 order-1 order-md-2">
    手机上排第一，桌面排第二
  </div>
</div>

列嵌套 #

在列中嵌套新的行和列：

html

<div class="row">
  <div class="col-8">
    外层列 8
    <div class="row">
      <div class="col-6">嵌套列 6</div>
      <div class="col-6">嵌套列 6</div>
    </div>
  </div>
  <div class="col-4">
    外层列 4
  </div>
</div>

间距工具 #

行间距（Gutters） #

Bootstrap 5 使用 g-* 类控制列间距：

html

<!-- 默认间距 -->
<div class="row">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

<!-- 无间距 -->
<div class="row g-0">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

<!-- 大间距 -->
<div class="row g-5">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

水平和垂直间距 #

html

<!-- 水平间距 -->
<div class="row gx-5">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

<!-- 垂直间距 -->
<div class="row gy-5">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

响应式间距 #

html

<div class="row g-2 g-md-4 g-lg-5">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

实战案例 #

图片画廊 #

html

<div class="container">
  <div class="row g-3">
    <div class="col-6 col-md-4 col-lg-3">
      <img src="image1.jpg" class="img-fluid" alt="">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="image2.jpg" class="img-fluid" alt="">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="image3.jpg" class="img-fluid" alt="">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="image4.jpg" class="img-fluid" alt="">
    </div>
  </div>
</div>

产品列表 #

html

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
    <div class="col">
      <div class="card h-100">
        <img src="product.jpg" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">产品名称</h5>
          <p class="card-text">¥99.00</p>
        </div>
      </div>
    </div>
  </div>
</div>

表单布局 #

html

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label">姓</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">名</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-12">
      <label class="form-label">地址</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">城市</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-md-4">
      <label class="form-label">省份</label>
      <select class="form-select">
        <option>选择...</option>
      </select>
    </div>
    <div class="col-md-2">
      <label class="form-label">邮编</label>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

仪表盘布局 #

html

<div class="container-fluid">
  <div class="row">
    <!-- 侧边栏 -->
    <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link active" href="#">概览</a></li>
          <li class="nav-item"><a class="nav-link" href="#">报表</a></li>
          <li class="nav-item"><a class="nav-link" href="#">分析</a></li>
        </ul>
      </div>
    </nav>
    
    <!-- 主内容 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="row">
        <div class="col-md-3 mb-4">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">总用户</h6>
              <h2>12,345</h2>
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-4">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">总收入</h6>
              <h2>¥98,765</h2>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

栅格系统原理 #

CSS 实现 #

Bootstrap 栅格系统基于 Flexbox 实现：

css

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.col {
  flex: 1 0 0%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

Sass 变量 #

scss

$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-row-columns: 6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

最佳实践 #

1. 始终使用容器 #

html

<!-- 推荐 -->
<div class="container">
  <div class="row">...</div>
</div>

<!-- 不推荐 -->
<div class="row">...</div>

2. 行内只放列 #

html

<!-- 推荐 -->
<div class="row">
  <div class="col">内容</div>
</div>

<!-- 不推荐 -->
<div class="row">
  <div>直接内容</div>
</div>

3. 移动优先 #

html

<!-- 推荐：从移动端开始 -->
<div class="col-12 col-md-6 col-lg-4">内容</div>

<!-- 不推荐：从桌面端开始 -->
<div class="col-lg-4 col-md-6 col-12">内容</div>

4. 合理使用嵌套 #

html

<!-- 推荐：适度嵌套 -->
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col-6">嵌套内容</div>
    </div>
  </div>
</div>

<!-- 避免：过度嵌套 -->
<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col">过度嵌套</div>
        </div>
      </div>
    </div>
  </div>
</div>

常见问题 #

1. 列没有正确对齐？ #

确保使用了容器和行：

html

<div class="container">
  <div class="row">
    <div class="col">内容</div>
  </div>
</div>

2. 列间距太大或太小？ #

使用 g-* 类调整间距：

html

<div class="row g-2">小间距</div>
<div class="row g-5">大间距</div>
<div class="row g-0">无间距</div>

3. 列高度不一致？ #

使用 h-100 类或 Flexbox：

html

<div class="row">
  <div class="col">
    <div class="card h-100">等高卡片</div>
  </div>
</div>

下一步 #

现在你已经掌握了栅格系统，接下来学习排版，了解 Bootstrap 的文本样式！