Bootstrap 3 网格系统

基本用法

通过行（row）和列（col）的组合来创建布局：

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

列偏移

使用 .col-*-offset-* 实现列偏移：

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

列嵌套

在列内可以继续嵌套行和列：

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">嵌套 1</div>
            <div class="col-xs-6">嵌套 2</div>
        </div>
    </div>
</div>

列排序

使用 .col-*-push-* 和 .col-*-pull-* 改变列顺序：

<div class="row">
    <div class="col-md-8 col-md-push-4">右侧内容（先渲染）</div>
    <div class="col-md-4 col-md-pull-8">左侧内容（后渲染）</div>
</div>

与 Bootstrap 5 的差异

功能	Bootstrap 3	Bootstrap 5
超小屏类	.col-xs-*	.col-*
断点数量	4 个	6 个
列偏移	.col-*-offset-*	.offset-*-*
列排序	.col-*-push/pull-*	.order-*
gutter	30px（固定）	可配置（gap 类）