Bootstrap的row row-md/row-cols搭配图片无法正常换行问题求助

核心问题1：Bootstrap行类使用错误 #

你写的row-md-3是无效类，Bootstrap里控制每行列数的正确格式是**row-cols-{断点}-{列数}**，比如row-cols-md-3，原写法会导致布局规则不生效。

核心问题2：图片未做响应式约束 #

图片默认会按原始尺寸显示，可能撑爆列容器，导致无法自动换行。给图片加上Bootstrap的img-fluid类，就能让图片自适应容器宽度。

额外问题：ID与data-target里的空格 #

HTML元素ID不能包含空格，id="gallery button"和data-target="#gallery button"里的空格会直接导致折叠功能失效，建议改成id="gallery-button"和data-target="#gallery-button"。

修正后的完整代码 #

<div class="container">

    <button type="button" data-toggle="collapse" data-target="#gallery-button">Simple collapsible</button>
    
    <div id="gallery-button" class="collapse">

        <section class="gallery min-vh-100">

            <div class="row row-cols-md-3">
                <div class="col">
                    <img src="images/art_img000.jpg" class="gallery-item img-fluid">
                </div>  

                <div class="col">
                    <img src="images/art_img000.jpg" class="gallery-item img-fluid">
                </div>  

                <div class="col">
                    <img src="images/art_img000.jpg" class="gallery-item img-fluid">
                </div>  

                <div class="col">
                    <img src="images/art_img000.jpg" class="gallery-item img-fluid">
                </div>                  
            </div> 

        </section>

    </div>
</div>   

补充说明 #

• 要是需要更灵活的适配，比如大屏显示2列、中屏显示3列，可以用组合类row-cols-lg-2 row-cols-md-3
• 确保你的Bootstrap版本是4.x或5.x，row-cols类在这两个版本中才支持

内容的提问来源于stack exchange，提问作者Raoul L'artiste