本文详解如何将 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">
<p>替换为：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="row row-cols-1 row-cols-sm-2 g-3">
<p>✅ 效果： </p>
<ul>
<li><code>（xs）：1 列（堆叠） </code></li>
<li>
<code>≥576px</code>（sm 及以上）：始终 2 列（含 md、lg、xl） </li>
</ul>
<blockquote><p>? 提示：<code>row-cols-sm-2</code> 已覆盖所有更大视口，无需重复声明 <code>row-cols-md-2</code> 等——Bootstrap 的响应式工具类具有「向上生效」特性（即设置 sm 后，所有更大断点自动继承）。</p></blockquote>
<h3>? 进阶控制：按需指定多断点</h3>
<p>若需更精细控制（例如：sm 仍为 2 列，但 lg 屏恢复 3 列），可显式声明：</p>
<pre class="brush:php;toolbar:false;"><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<h3>⚠️ 注意事项</h3>
<ul>
<li>
<strong>勿遗漏 <code>g-3</code></strong>：<code>g-*</code>（gap）类控制列间距，删除后卡片会紧贴，影响视觉层次。 </li>
<li>
<strong><code>.col</code> 不可省略</strong>：每个卡片容器必须保留 <code>class="col"</code>，否则 Grid 布局失效（即使使用 <code>row-cols-*</code>，子元素仍需 <code>col</code> 触发 Flex 分配）。 </li>
<li>
<strong>Bootstrap 版本兼容性</strong>：<code>row-cols-*</code> 自 Bootstrap 5.0 起支持，确保引入的是 v5.x CSS/JS（如 CDN 链接中版本号为 <code>5.3.x</code> 或 <code>5.0.x</code>）。 </li>
<li>
<strong>内容动态加载时</strong>：若卡片由 JavaScript 动态插入（如你代码中的 <code>swap-image-container</code>），请确保新元素也包裹在 <code>class="col"</code> 内，否则无法被 <code>row-cols-*</code> 正确分配。</li>
</ul>
<h3>? 完整可运行示例（精简版）</h3>
<pre class="brush:php;toolbar:false;"><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">
@@##@@
<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">
@@##@@
<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 响应式网格的关键实践之一。
