本文详解如何将 Bootstrap 官方 Album 示例默认的 3 列响应式网格改为 2 列布局，通过调整 row-cols-* 工具类实现跨断点精准控制，并提供可直接运行的代码示例与关键注意事项。
本文详解如何将 Bootstrap 官方 Album 示例默认的 3 列响应式网格改为 2 列布局，通过调整 `row-cols-*` 工具类实现跨断点精准控制，并提供可直接运行的代码示例与关键注意事项。
Bootstrap 5 的 Album 示例（如 官方文档 v5.0+）默认采用三列网格布局，其核心在于 .row 容器上应用的响应式列工具类：row-cols-1 row-cols-sm-2 row-cols-md-3。该写法表示：
- 超小屏幕（
- 小屏幕及以上（≥576px）：2 列
- 中等屏幕及以上（≥768px）：3 列
要将其改为统一 2 列布局（例如适配更宽卡片、提升移动端可读性或匹配设计规范），只需移除或修改中屏及以上断点的列定义。
✅ 推荐方案：固定双列，全断点一致
将原代码中的：
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
替换为：
<div class="row row-cols-1 row-cols-sm-2 g-3">
✅ 效果：
（xs）：1 列（堆叠）-
≥576px（sm 及以上）：始终 2 列（含 md、lg、xl）
? 提示：
row-cols-sm-2已覆盖所有更大视口，无需重复声明row-cols-md-2等——Bootstrap 的响应式工具类具有「向上生效」特性（即设置 sm 后，所有更大断点自动继承）。
? 进阶控制：按需指定多断点
若需更精细控制（例如：sm 仍为 2 列，但 lg 屏恢复 3 列），可显式声明：
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
⚠️ 注意事项
-
勿遗漏
g-3：g-*（gap）类控制列间距，删除后卡片会紧贴，影响视觉层次。 -
.col不可省略：每个卡片容器必须保留class="col"，否则 Grid 布局失效（即使使用row-cols-*，子元素仍需col触发 Flex 分配）。 -
Bootstrap 版本兼容性：
row-cols-*自 Bootstrap 5.0 起支持，确保引入的是 v5.x CSS/JS（如 CDN 链接中版本号为5.3.x或5.0.x）。 -
内容动态加载时：若卡片由 JavaScript 动态插入（如你代码中的
swap-image-container），请确保新元素也包裹在class="col"内，否则无法被row-cols-*正确分配。
? 完整可运行示例（精简版）
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 g-3">
<!-- 卡片 1 -->
<div class="col">
<div class="card shadow-sm">
<img src="..." class="card-img-top" alt="Swap result">
<div class="card-body">
<p class="card-text">Swap image. Face replacement result.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">Just now</small>
</div>
</div>
</div>
</div>
<!-- 卡片 2 -->
<div class="col">
<div class="card shadow-sm">
<img src="..." class="card-img-top" alt="Enhanced swap">
<div class="card-body">
<p class="card-text">Enhanced Swap image. With post-processing.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">Download</button>
</div>
<small class="text-muted">1 min ago</small>
</div>
</div>
</div>
</div>
<!-- 更多卡片... -->
</div>
</div>
</div>通过上述调整，你即可在不修改 Bootstrap 源码、不编写额外 CSS 的前提下，快速、语义化地实现 Album 组件的列数定制。灵活运用 row-cols-* 是掌握 Bootstrap 5 响应式网格的关键实践之一。
