基于Bootstrap 5实现带图片和按钮的响应式列表布局问题

我需要实现一个容器，包含4张并排的图片，每张图片下方配有按钮。屏幕尺寸变化时，容器内的项目需保持响应式，按钮始终与对应图片绑定。现有代码如下：

<div class="container-md">
    <div class="row">
        <div class="col-md-3">
            <img src="img1.png">
            <button class="btn mt-2 btn-secondary">Button 1</button>
        </div>
        <div class="col-md-3">
            <img src="img2.png">
            <button class="btn mt-2 btn-secondary">Button 2</button>
        </div>
        <div class="col-md-3">
            <img src="img3.png">        
            <button class="btn mt-2 btn-secondary">Button 3</button>       
        </div>
        <div class="col-md-3">
            <img src="img4.png">  
            <button class="btn mt-2 btn-secondary">Button 4</button>
        </div>
    </div>
</div>

预期效果 #

大屏幕尺寸：

中等屏幕尺寸：

小屏幕尺寸：

实际问题 #

运行后图片尺寸过大，按钮与图片挤在同一行，完全没有响应式效果（示例用表情图展示）：

解决方法及优化建议 #

• 修复图片自适应：给所有图片添加img-fluid类，这是Bootstrap内置类，能让图片自动适应容器宽度并保持比例，避免撑破布局。
• 完善响应式断点：将列的类调整为col-lg-3 col-md-6 col-sm-12，实现大屏幕4列、中屏幕2列、小屏幕1列的布局，完全匹配预期效果。
• 优化视觉一致性：给按钮添加w-100类，让按钮宽度与图片一致；给每个项目容器添加p-2类，增加内边距，让布局更宽松美观。

修改后的完整代码 #

<div class="container-md">
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-12 p-2">
            <img src="img1.png" class="img-fluid">
            <button class="btn mt-2 btn-secondary w-100">Button 1</button>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 p-2">
            <img src="img2.png" class="img-fluid">
            <button class="btn mt-2 btn-secondary w-100">Button 2</button>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 p-2">
            <img src="img3.png" class="img-fluid">        
            <button class="btn mt-2 btn-secondary w-100">Button 3</button>       
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 p-2">
            <img src="img4.png" class="img-fluid">  
            <button class="btn mt-2 btn-secondary w-100">Button 4</button>
        </div>
    </div>
</div>

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