网格系统

概述

Bootstrap 的网格系统使用一系列容器（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 列系统

每行最多分为 12 列，你可以指定每列占用的列数：

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

响应式断点

Bootstrap 5 提供 6 个响应式断点，通过不同的类前缀控制不同屏幕尺寸下的布局：

混合布局示例

结合多个断点类，实现不同屏幕下的不同布局：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-8">
            手机上半宽，桌面上占8列
        </div>
        <div class="col-sm-6 col-lg-4">
            手机上半宽，桌面上占4列
        </div>
    </div>
</div>

对齐方式

使用 Flexbox 对齐类控制列在行中的位置：

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

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

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

嵌套网格

在列中再嵌套一行，即可创建复杂的嵌套布局：

<div class="row">
    <div class="col-sm-9">
        一级列
        <div class="row">
            <div class="col-8">二级列</div>
            <div class="col-4">二级列</div>
        </div>
    </div>
</div>

自动布局列

使用 .col 实现等宽列，或使用 .col-{breakpoint}-auto 根据内容自动调整宽度：

<!-- 等宽列 -->
<div class="row">
    <div class="col">等宽</div>
    <div class="col">等宽</div>
    <div class="col">等宽</div>
</div>

<!-- 内容自适应宽度 -->
<div class="row">
    <div class="col-lg-auto">根据内容决定宽度</div>
    <div class="col-lg">占据剩余空间</div>
</div>

<!-- 等宽多行（每行自动换行） -->
<div class="row">
    <div class="col">列 1</div>
    <div class="col">列 2</div>
    <div class="w-100"></div> <!-- 手动换行 -->
    <div class="col">列 3</div>
    <div class="col">列 4</div>
</div>

偏移与排序

使用 .offset-* 在列左侧增加空白，使用 .order-* 改变列的顺序：

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

<!-- 偏移实现居中 -->
<div class="row">
    <div class="col-md-6 offset-md-3">居中占 6 列</div>
</div>

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

<!-- 响应式排序 -->
<div class="row">
    <div class="col order-last order-md-first">移动端在最后，桌面端在最前</div>
    <div class="col">默认顺序</div>
</div>

垂直对齐

使用 align-items-* 控制行内所有列的垂直对齐，或使用 align-self-* 控制单个列：

<!-- 行级垂直对齐 -->
<div class="row align-items-start">...</div>  <!-- 顶部 -->
<div class="row align-items-center">...</div> <!-- 居中 -->
<div class="row align-items-end">...</div>    <!-- 底部 -->

<!-- 列级垂直对齐 -->
<div class="row">
    <div class="col align-self-start">顶部</div>
    <div class="col align-self-center">居中</div>
    <div class="col align-self-end">底部</div>
</div>

水平对齐

使用 justify-content-* 控制行内列的水平分布：

<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">   <!-- 两端对齐 -->
<div class="row justify-content-evenly">    <!-- 均匀分布，等距 -->

Row Columns 简写

使用 .row-cols-* 快速定义每行的列数，无需在每个列上重复指定宽度：

<div class="row row-cols-2 row-cols-md-4 g-4">
    <div class="col"><div class="card p-3">卡片 1</div></div>
    <div class="col"><div class="card p-3">卡片 2</div></div>
    <div class="col"><div class="card p-3">卡片 3</div></div>
    <div class="col"><div class="card p-3">卡片 4</div></div>
    <div class="col"><div class="card p-3">卡片 5</div></div>
    <div class="col"><div class="card p-3">卡片 6</div></div>
</div>

支持所有断点前缀：.row-cols-1、.row-cols-sm-2、.row-cols-md-3、.row-cols-lg-4、.row-cols-xl-5、.row-cols-xxl-6。

Sass Mixin 用法

在自定义编译 Bootstrap 时，可以使用 Sass mixin 创建自己的网格布局：

// 自定义容器
.custom-container {
    @include make-container();
}

// 自定义行
.custom-row {
    @include make-row();
}

// 自定义列
.custom-col {
    @include make-col-ready();
    @include make-col(6, 12); // 占 6 列
}

// 自定义偏移
.custom-offset-col {
    @include make-col-ready();
    @include make-col(4, 12);
    @include make-col-offset(4, 12); // 偏移 4 列
}

最佳实践

• 优先使用 .col-* 断点类，从移动端开始设计（Mobile First）
• 使用 .row-cols-* 简化等宽网格，适合卡片列表、图片画廊等场景
• 利用 .offset-* 实现居中或不对称布局，避免创建空列占位
• 使用 .order-* 在响应式布局中重新排列内容顺序
• 列宽度总和不应超过 12，超出部分会自动换行列

常见问题