Bootstrap col-s-4实现三图并排，移动端垂直堆叠问题求助

核心问题 #

你使用的col-s-4不是Bootstrap的有效栅格类，这导致移动端和平板端的列无法正确分配宽度，从而出现垂直堆叠的情况。Bootstrap栅格的断点前缀为：xs（超小屏，<768px）、sm（小屏，≥768px）、md（中屏，≥992px）等（Bootstrap 3）；在Bootstrap 4/5中，xs前缀被省略，直接用col-*表示超小屏及以上尺寸。

修正方案 #

根据你使用的Bootstrap版本，修改列类即可解决问题：

若使用Bootstrap 3

将col-s-4替换为col-xs-4，确保所有屏幕尺寸下每列占1/3宽度：

<div class="container-fluid">
    <div class="row" id="order">
        <div class="col-xs-4">
            <img class="img-responsive" src="order/order1.jpg">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive" src="order/order2.jpg">
        </div>
        <div class="col-xs-4">
            <img class="img-responsive" src="order/order3.jpg">
        </div>
    </div>
</div>

若使用Bootstrap 4/5

将col-s-4替换为col-4，同时将img-responsive替换为Bootstrap 4+的响应式图片类img-fluid：

<div class="container-fluid">
    <div class="row" id="order">
        <div class="col-4">
            <img class="img-fluid" src="order/order1.jpg">
        </div>
        <div class="col-4">
            <img class="img-fluid" src="order/order2.jpg">
        </div>
        <div class="col-4">
            <img class="img-fluid" src="order/order3.jpg">
        </div>
    </div>
</div>

额外说明 #

• 无需额外设置width: calc(100%/3)或手动缩小图片，Bootstrap栅格会自动为列分配对应宽度。
• 你CSS中的object-fit: contain可以保留，确保图片按比例缩放且不被裁剪。

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