Bootstrap 4 网格系统详解

一、核心原理

Bootstrap 4 网格系统基于 12 列 Flexbox 布局，通过预定义的 CSS 类实现响应式页面结构。

三大核心元素：

Container → Row → Column
  容器      行     列

• Container：提供宽度约束和水平居中
• Row：行的直接子元素，用于包裹列，负 margin 抵消 container 的 padding
• Column：实际内容区域，通过列数控制宽度比例

---

二、响应式断点

Bootstrap 4 定义了 5 个断点，对应 5 种屏幕尺寸：

断点	类前缀	尺寸范围	典型设备
Extra small	col-	< 576px	手机竖屏
Small	col-sm-	>= 576px	手机横屏
Medium	col-md-	>= 768px	平板
Large	col-lg-	>= 992px	笔记本
Extra large	col-xl-	>= 1200px	桌面显示器

规则：设定的断点样式会向上继承。例如 col-md-6 在 md/lg/xl 下都生效，除非被更大断点的类覆盖。

---

三、Container 容器

两种类型

<!-- 固定宽度容器：每个断点有不同 max-width -->
<div class="container">
  <!-- xs: 100% | sm: 540px | md: 720px | lg: 960px | xl: 1140px -->
</div>

<!-- 流式容器：始终 100% 宽度 -->
<div class="container-fluid">
  <!-- 所有断点都是 100% -->
</div>

各断点固定容器宽度

断点	max-width	两侧 padding
< 576px	100%	15px
>= 576px	540px	15px
>= 768px	720px	15px
>= 992px	960px	15px
>= 1200px	1140px	15px

---

四、列（Column）用法

1. 等宽列

不指定列数，自动平分 12 列：

<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>

2. 指定列数

<div class="row">
  <div class="col-8">8/12</div>
  <div class="col-4">4/12</div>
</div>

常用比例速查：

比例	类名组合
1:1	col-6 + col-6
1:2	col-4 + col-8
1:3	col-3 + col-9
1:1:1	col-4 + col-4 + col-4
2:3:5	col-2 + col-3 + col-5（不常用但可行）
侧边栏+主内容	col-md-3 + col-md-9

3. 响应式混合列

不同断点使用不同布局：

<div class="row">
  <!-- 手机全宽，平板各占一半，桌面 8:4 -->
  <div class="col-12 col-sm-6 col-lg-8">主内容</div>
  <div class="col-12 col-sm-6 col-lg-4">侧边栏</div>
</div>

效果：

手机 (<576px)：  ┌──────────────┐  ┌──────────────┐
                 │   主内容     │  │   侧边栏     │  各占一行
                 └──────────────┘  └──────────────┘

平板 (>=576px)： ┌──────┬──────┐
                 │主内容│侧边栏│  各占 50%
                 └──────┴──────┘

桌面 (>=992px)： ┌──────────┬────┐
                 │  主内容  │侧栏│  8:4
                 └──────────┴────┘

4. 设定一列宽度，其余自适应

<div class="row">
  <div class="col">自适应</div>
  <div class="col-5">固定 5 列</div>
  <div class="col">自适应</div>
</div>
<!-- 结果：自适应各占 (12-5)/2 = 3.5 列 -->

5. 换行

超过 12 列自动换行：

<div class="row">
  <div class="col-9">9 列</div>
  <div class="col-4">4 列 → 换到下一行</div>
  <div class="col-6">6 列</div>
</div>

手动换行（使用 .w-100）：

<div class="row">
  <div class="col-6">第一行左</div>
  <div class="col-6">第一行右</div>
  <div class="w-100"></div>  <!-- 强制换行 -->
  <div class="col-6">第二行左</div>
  <div class="col-6">第二行右</div>
</div>

---

五、偏移（Offset）

向右推 N 列的距离：

<div class="row">
  <div class="col-md-4">左侧</div>
  <div class="col-md-4 offset-md-4">右侧（偏移4列）</div>
</div>

<!-- 居中效果 -->
<div class="row">
  <div class="col-md-6 offset-md-3">水平居中（6列宽，偏移3列）</div>
</div>

Offset 速查：

列宽	居中 offset	效果
col-4	offset-4	4+4+4
col-6	offset-3	3+6+3
col-8	offset-2	2+8+2
col-3	offset-1	1+3+8

---

六、对齐

1. 垂直对齐（在 .row 上设置）

<!-- 顶部对齐 -->
<div class="row align-items-start">
  <div class="col">高内容<br>更多行</div>
  <div class="col">短内容</div>
</div>

<!-- 居中对齐 -->
<div class="row align-items-center">
  <div class="col">高内容<br>更多行</div>
  <div class="col">短内容</div>
</div>

<!-- 底部对齐 -->
<div class="row align-items-end">...</div>

单列垂直对齐（在 .col 上设置）：

<div class="row align-items-start" style="height:200px">
  <div class="col align-self-center">我垂直居中</div>
  <div class="col">我在顶部</div>
</div>

2. 水平对齐（在 .row 上设置）

<div class="row justify-content-start">  <!-- 左对齐（默认） -->
<div class="row justify-content-center">  <!-- 居中 -->
<div class="row justify-content-end">     <!-- 右对齐 -->
<div class="row justify-content-around">  <!-- 等间距（两侧有间距） -->
<div class="row justify-content-between"> <!-- 两端对齐（两侧无间距） -->

start:    ■■ ■■ ■■
center:         ■■ ■■ ■■
end:                  ■■ ■■ ■■
around:   ■■    ■■    ■■       (两侧有半间距)
between:  ■■       ■■       ■■ (两侧无间距)

---

七、列排序（Order）

1. 使用 order 类

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

2. 首尾快捷类

<div class="row">
  <div class="col order-last">排最后</div>
  <div class="col">中间</div>
  <div class="col order-first">排最前</div>
</div>

3. 响应式排序

<div class="col order-md-2 order-lg-1">
  <!-- md 下排第2，lg 下排第1 -->
</div>

典型场景：移动端侧边栏在下方，桌面端侧边栏在左侧：

<div class="row">
  <div class="col-md-9 order-2 order-md-1">主内容</div>
  <div class="col-md-3 order-1 order-md-2">侧边栏</div>
</div>
<!-- 手机：侧边栏在上，主内容在下 -->
<!-- 桌面：主内容在左，侧边栏在右 -->

---

八、嵌套网格

在列中再放 row + col，嵌套的 row 重新拥有 12 列：

<div class="row">
  <div class="col-sm-9">
    外层 9 列
    <div class="row">
      <div class="col-8">内层 8/12</div>
      <div class="col-4">内层 4/12</div>
    </div>
  </div>
  <div class="col-sm-3">外层 3 列</div>
</div>

---

九、Gutter 控制（列间距）

Bootstrap 4 的列间距通过 row 的负 margin 和 col 的 padding 实现，默认 30px（每侧 15px）。

去除间距

<div class="row no-gutters">
  <div class="col-6">无间距</div>
  <div class="col-6">无间距</div>
</div>

自定义间距

/* 增大间距 */
.row.gutter-lg {
  margin-left: -20px;
  margin-right: -20px;
}
.row.gutter-lg > [class*="col-"] {
  padding-left: 20px;
  padding-right: 20px;
}

---

十、完整实战示例

典型博客布局

<div class="container">
  <!-- 头部 -->
  <div class="row mb-4">
    <div class="col-12">
      <h1>我的博客</h1>
    </div>
  </div>

  <!-- 主体 -->
  <div class="row">
    <!-- 文章列表 -->
    <div class="col-12 col-md-8 col-lg-9">
      <div class="row">
        <div class="col-12 col-sm-6 mb-3">
          <div class="card"><div class="card-body">文章1</div></div>
        </div>
        <div class="col-12 col-sm-6 mb-3">
          <div class="card"><div class="card-body">文章2</div></div>
        </div>
        <div class="col-12 col-sm-6 mb-3">
          <div class="card"><div class="card-body">文章3</div></div>
        </div>
        <div class="col-12 col-sm-6 mb-3">
          <div class="card"><div class="card-body">文章4</div></div>
        </div>
      </div>
    </div>

    <!-- 侧边栏 -->
    <div class="col-12 col-md-4 col-lg-3 order-first order-md-last">
      <div class="card mb-3"><div class="card-body">关于我</div></div>
      <div class="card"><div class="card-body">标签云</div></div>
    </div>
  </div>
</div>

布局效果：

手机：                平板：                 桌面：
┌──────────────┐     ┌────────┬──────┐     ┌──────────┬────┐
│   关于我      │     │ 文章1  │文章2 │     │ 文章1 文章2│关于│
├──────────────┤     │ 文章3  │文章4 │     │ 文章3 文章4│标签│
│   标签云      │     │        │关于  │     │           │    │
├──────────────┤     │        │标签  │     │           │    │
│   文章1      │     └────────┴──────┘     └──────────┴────┘
├──────────────┤
│   文章2      │
└──────────────┘

---

十一、常见问题与技巧

问题	解决方案
列之间有空白间隙	正常行为，由 padding 产生；用 no-gutters 去除
列高度不一致	给 row 加 align-items-stretch（默认行为）或使用等高卡片
12 列不够用	使用嵌套网格，内层重新拥有 12 列
想要 5 等分	用等宽 .col + max-width: 20% 自定义，或用 flex 方案
列内容超出	给列加 text-truncate 或 overflow-hidden
想精确控制像素	网格系统是百分比布局，精确像素需自定义 CSS
col vs col-auto	col 等分剩余空间，col-auto 按内容宽度自适应