容器 Container
容器是 Bootstrap 布局中最基本的元素，用于居中包裹内容：
<div class="container">
固定宽度居中容器，响应式变化
</div>
<div class="container-fluid">
全宽容器，始终占满视口宽度
</div>
注意：Bootstrap 4 不支持 .container-md 等断点容器类（这是 Bootstrap 5 新增的）。只有 .container 和 .container-fluid 两种容器。
响应式断点
Bootstrap 4 支持 5 个断点（比 v5 少一个 xxl 断点）：
| 断点 | 类前缀 | 最小宽度 | 说明 |
|---|
| Extra small | .col- | <576px | 手机竖屏 |
| Small | .col-sm- | ≥576px | 手机横屏 |
| Medium | .col-md- | ≥768px | 平板 |
| Large | .col-lg- | ≥992px | 桌面 |
| Extra large | .col-xl- | ≥1200px | 大屏桌面 |
间距系统
Bootstrap 4 的间距类使用 m（外边距）和 p（内边距），配合方向标识：
<div class="mt-3">上外边距</div>
<div class="mb-3">下外边距</div>
<div class="ml-auto">左侧自动外边距（常用于右对齐）</div>
<div class="mr-3">右侧外边距</div>
<div class="mx-auto">水平居中</div>
注意：Bootstrap 4 使用 .ml-* 和 .mr-*（left/right），而 v5 改为 .ms-* 和 .me-*（start/end）。
可见性控制
Bootstrap 4 使用 .d-* 显示类控制元素在不同断点下的可见性：
<div class="d-none d-md-block"> 仅在 md 及以上显示 </div>
<div class="d-lg-none"> 在 lg 及以上隐藏 </div>
<div class="d-block d-md-none"> 仅在手机端显示 </div>
旧版可见类（Bootstrap 4.0-4.4）
早期版本的 Bootstrap 4 还支持 .hidden-* 和 .visible-* 类，但在 4.5+ 版本中已弃用，建议全部改用 .d-* 系列：
<!-- 已弃用（不要在新代码中使用） -->
<div class="hidden-md-down"> 在 md 及以下隐藏 </div>
<div class="visible-lg"> 仅在 lg 显示 </div>
<!-- 推荐方式 -->
<div class="d-none d-lg-block"> 仅在 lg 及以上显示 </div>
与 Bootstrap 5 布局区别
- Bootstrap 4 没有
.container-xxl（1400px 断点）
- Bootstrap 4 没有
.container-{breakpoint} 响应式容器
- Bootstrap 4 使用
.no-gutters 移除间距（v5 使用 .g-0）
- Bootstrap 4 使用
.ml-/.mr-，v5 使用 .ms-/.me-
- Bootstrap 4 的
.row 默认 margin-left/right: -15px（v5 为 -12px）