Bootstrap 3 布局

容器

Bootstrap 3 有两种容器：

• .container：固定宽度居中容器，响应式断点宽度变化
• .container-fluid：100% 宽度的流动容器

<div class="container">
    <!-- 内容区域，最大宽度 1170px -->
</div>

<div class="container-fluid">
    <!-- 全宽内容区域 -->
</div>

栅格系统

Bootstrap 3 使用 12 列栅格系统，提供四种断点：

断点	类前缀	屏幕宽度
超小屏	.col-xs-	< 768px
小屏	.col-sm-	≥ 768px
中屏	.col-md-	≥ 992px
大屏	.col-lg-	≥ 1200px

<div class="row">
    <div class="col-sm-6 col-md-4">左侧内容</div>
    <div class="col-sm-6 col-md-8">右侧内容</div>
</div>

响应式工具类

Bootstrap 3 提供了 .visible-* 和 .hidden-* 类来控制元素的显示与隐藏：

<div class="visible-md-block">仅在中屏显示</div>
<div class="hidden-xs">在超小屏隐藏</div>

与 Bootstrap 5 的差异

• Bootstrap 3 使用 .col-xs-*，Bootstrap 5 使用 .col-*
• Bootstrap 3 没有 .col-xl-* 和 .col-xxl-* 断点
• Bootstrap 3 使用 .pull-left / .pull-right，Bootstrap 5 使用 .float-start / .float-end
• Bootstrap 3 的 .center-block 在 Bootstrap 5 中由 .mx-auto 替代