Bootstrap 栅格系统

栅格系统是 Bootstrap 的灵魂。它把页面横向虚拟成 12 等份,通过指定元素"占几份"来布局。掌握栅格,Bootstrap 就学会了一半。这一章带你彻底搞懂 12 列的原理和玩法。

1. 12 列是什么意思?

Bootstrap 把任何一行水平空间(从左到右)虚拟地切成 12 等份。一个元素如果"占 4 份",意思是它占据这一行的 4/12 = 33.33% 宽度。你可以放任意多个元素,只要它们的份数之和不超过 12,就会横向并排;超过 12 就自动换行。

为什么是 12 而不是 10?因为 12 能被 2、3、4、6 整除——既能做 2 列、3 列、4 列,也能做 6 列,灵活度最高。

2. 栅格三件套:container / row / col

任何栅格布局都由三层结构组成,缺一不可:

<!-- 栅格的"三件套":container > row > col -->
<div class="container">
  <div class="row">
    <div class="col">第一列</div>
    <div class="col">第二列</div>
    <div class="col">第三列</div>
  </div>
</div>

<!-- 渲染结果:三个等宽的列横向排列,自动占满容器宽度 -->

container:最外层居中容器,自带左右内边距,让内容不至于贴着浏览器边缘。
row:一行,内部用负 margin 抵消 col 的 padding,让多个 col 紧密排列没有缝隙。
col:列,真正的单元格。每列自带左右 padding(默认 12px),让内容之间有间距。

这三层就像"信封 > 文件夹 > 纸"——container 装着 row,row 装着 col。不要跳过 row 直接写 col,否则列之间不会有正确间距。

3. 自动等分:不写数字

最简单的用法是 col 不带数字——它会根据兄弟 col 的数量自动等分剩余空间:

<!-- 三个 .col 自动等分,每个占 4/12 = 33.33% -->
<div class="row">
  <div class="col">A (4)</div>
  <div class="col">B (4)</div>
  <div class="col">C (4)</div>
</div>

<!-- 四个 .col 也能等分,每个占 3/12 = 25% -->
<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>

这种写法适合"我不知道几列,反正平分"的场景。注意:自动等分的列,内容多时会自动调整宽度——内容多的列会更宽。如果想强制等宽(无论内容多少),加 col-equal 或用 col-* 显式指定。

4. 指定列数:col-*

想精确控制每列宽度,用 col-N,N 是 1~12 的数字:

<!-- 主侧布局:8 + 4 = 12,刚好占满 -->
<div class="row">
  <div class="col-8">主内容(占 8 列)</div>
  <div class="col-4">侧边栏(占 4 列)</div>
</div>

<!-- 三种常见比例 -->
<div class="row">
  <div class="col-6">占一半</div>
  <div class="col-6">占一半</div>
</div>

<div class="row">
  <div class="col-3">1/4</div>
  <div class="col-3">1/4</div>
  <div class="col-3">1/4</div>
  <div class="col-3">1/4</div>
</div>

<!-- 不等分也可以,总和不必等于 12 -->
<div class="row">
  <div class="col-5">占 5</div>
  <div class="col-4">占 4</div>
  <div class="col-2">占 2,剩 1 列空白</div>
</div>

关键点:

总和不必等于 12:小于 12 会留空白;等于 12 刚好占满;大于 12 自动换行。
百分比换算:col-6 = 50%,col-4 = 33.33%,col-3 = 25%,col-2 ≈ 16.67%。
最常用比例:主侧布局 col-8 + col-4;三等分 col-4 × 3;四等分 col-3 × 4。

5. 自动宽度:col-auto

有时你希望一列"按内容宽度"撑开,另一列占满剩余。用 col-auto:

<!-- 一列固定宽度,另一列自适应占满剩余 -->
<div class="row">
  <div class="col-auto">固定宽度(按内容计算)</div>
  <div class="col">自适应剩余空间</div>
</div>

<!-- 渲染:左侧按文字长度撑开,右侧自动填满 -->

常见场景:表单里"标签 + 输入框 + 按钮",标签和按钮用 col-auto,输入框用 col 占满剩余——这样无论屏幕多宽,布局都合理。

6. 嵌套栅格

在一个 col 里再放一个 row,就是嵌套栅格。内层 row 会重新分成 12 份,跟外层完全独立:

<!-- 嵌套栅格:在外层 col 里再放 row -->
<div class="row">
  <div class="col-8">
    外层主内容
    <!-- 嵌套时,内层 row 重新分成 12 列 -->
    <div class="row">
      <div class="col-6">内层左半</div>
      <div class="col-6">内层右半</div>
    </div>
  </div>
  <div class="col-4">外层侧边</div>
</div>

注意:嵌套时父 col 必须有 padding,否则内层 row 的负 margin 会让内容溢出。Bootstrap 默认 col 自带 padding,所以一般没问题,但如果你移除了 padding 又嵌套,就会出 bug。

7. 列偏移:offset

想让一列向右空出几格,用 offset-N:

<!-- coloffset-* 让列向右空出几格 -->
<div class="row">
  <div class="col-4">靠左</div>
  <div class="col-4 offset-4">右侧带 4 格偏移</div>
</div>

<!-- 居中一列:让 col-6 偏移 3 格,两边各空 3 -->
<div class="row">
  <div class="col-6 offset-3">水平居中</div>
</div>

用得最多的是"水平居中"——让 col-6 偏移 3 格,左右各空 3 格,视觉上居中。比写 margin: 0 auto 还简单。

8. 列排序:order

想改变视觉顺序但不改 DOM(对 SEO 和读屏器友好),用 order-N:

<!-- colorder-* 改变视觉顺序,不改 DOM -->
<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 是快捷值 -->
<div class="row">
  <div class="col order-last">原本第一,挪到最后</div>
  <div class="col">原本第二</div>
</div>

1~5 是数字,另外有 order-first 和 order-last 两个快捷值。响应式场景下用得最多——比如手机上图片在上、文字在下,桌面上文字在上、图片在下,就是用 order 配合断点后缀实现的。

小结

栅格系统的核心知识点:

结构:container > row > col,三层缺一不可。
12 份:一行被切成 12 等份,col-N 占 N 份。
三种用法:col 自动等分、col-N 指定列数、col-auto 按内容撑开。
进阶:嵌套栅格、offset 偏移、order 排序。

下一篇我们看栅格的布局容器更深入的内容——container 的三种宽度变体,以及 row 的 gutter(列间距)控制。

← 上一篇 Bootstrap 环境引入

下一篇布局容器 →

✈️💬