Bootstrap 4 网格系统

概述

Bootstrap 4 的网格系统与 v5 基本相同——使用容器（container）、行（row）和列（col），基于 Flexbox 构建。主要区别在于断点数量和部分类名。

基本结构

<div class="container">
    <div class="row">
        <div class="col">
            每列等宽
        </div>
        <div class="col">
            每列等宽
        </div>
        <div class="col">
            每列等宽
        </div>
    </div>
</div>

12 列系统

<div class="container">
    <div class="row">
        <div class="col-md-8">主区域（占8列）</div>
        <div class="col-md-4">侧边栏（占4列）</div>
    </div>
</div>

断点对比（v4 vs v5）

Row Columns 简写

Bootstrap 4 也支持 .row-cols-* 快速定义每行列数：

<div class="row row-cols-1 row-cols-md-3">
    <div class="col"><div class="card">卡片 1</div></div>
    <div class="col"><div class="card">卡片 2</div></div>
    <div class="col"><div class="card">卡片 3</div></div>
</div>

注意：.row-cols-* 在 v4 中只支持 1 到 6（v5 相同）。

对齐方式

<!-- 垂直居中 -->
<div class="row align-items-center">...</div>

<!-- 水平居中 -->
<div class="row justify-content-center">...</div>

<!-- 两端对齐 -->
<div class="row justify-content-between">...</div>

间距控制

Bootstrap 4 使用 .no-gutters 移除行内列的间距（v5 改用 .g-0）：

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

Bootstrap 4 不直接支持 .g-*、.gx-* 和 .gy-* 间距类（v5 新增）。在 v4 中，需要通过自定义 CSS 或使用 padding 工具类来调整间距。

偏移与排序

<!-- 偏移列 -->
<div class="row">
    <div class="col-md-4">占 4 列</div>
    <div class="col-md-4 offset-md-4">向右偏移 4 列</div>
</div>

<!-- 改变列顺序 -->
<div class="row">
    <div class="col order-3">显示在第三位</div>
    <div class="col order-1">显示在第一位</div>
    <div class="col order-2">显示在第二位</div>
</div>

与 Bootstrap 5 网格区别

• Bootstrap 4 没有 .col-xxl-* 断点
• Bootstrap 4 使用 .no-gutters 移除间距，v5 使用 .g-0
• Bootstrap 4 默认 gutter 为 30px（15px 每侧），v5 为 24px（12px 每侧）
• Bootstrap 4 的 .offset-* 和 .order-* 用法与 v5 完全一致