如何将Bootstrap 5 Album示例的列数从3修改为2？

我在Web应用中使用Bootstrap 5的Album示例，该示例运行正常，但我需要将列数从3改为2。尝试修改Bootstrap类名中的列数设置，但未产生任何变化。我的代码如下：

<div class="album py-5 bg-light">
    <div class="container">

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

            <div id="swap-image-container" style="display: none;" class="col">
                <div class="card shadow-sm">
                    <img id="swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <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">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="enchanced-swap-image-container" style="display: none;" class="col">
                <div class="card shadow-sm">
                    <img id="enchanced-swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <div class="card-body">
                        <p class="card-text">Enchanced Swap image. Face replacement result with post-processing.</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

完全可以实现列数从3改2的需求，问题出在你没正确调整对应断点的row-cols类：

• 原代码里的row-cols-md-3表示中等屏幕及以上（≥768px）时显示3列，这就是你改了没生效的核心原因。
• 只需要把row-cols-md-3改成row-cols-md-2，就能让中等屏幕及以上的布局变成2列。

修改后的完整代码如下：

<div class="album py-5 bg-light">
    <div class="container">

        <!-- 修改row-cols-md-3为row-cols-md-2 -->
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 g-3">

            <!-- 测试时可以先去掉display:none，方便查看效果 -->
            <div id="swap-image-container" class="col">
                <div class="card shadow-sm">
                    <img id="swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <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">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="enchanced-swap-image-container" class="col">
                <div class="card shadow-sm">
                    <img id="enchanced-swap-image" class="bd-placeholder-img card-img-top" width="100%" height="100%"/>
                    <div class="card-body">
                        <p class="card-text">Enchanced Swap image. Face replacement result with post-processing.</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

补充说明：

• row-cols-1：移动端（<576px）显示1列
• row-cols-sm-2：小屏幕（≥576px）显示2列
• row-cols-md-2：中等屏幕及以上（≥768px）显示2列
• 另外你的卡片默认是display: none，测试时建议先移除这个样式，确认布局生效后再按需通过JS控制显示隐藏。

内容的提问来源于stack exchange，提问作者user26629150