为什么Bootstrap 6:3:3列布局不生效，第三列被换到新行？

问题原因 #

Bootstrap栅格系统默认遵循12列规则，你设置的col-lg-6+col-lg-3+col-lg-3刚好占满12列，正常不会换行，出现该问题通常是以下几个原因：

• 内部图片未做响应式适配：你代码中的<img>标签没有添加Bootstrap内置的img-fluid类，若图片原始宽度大于所在列的容器宽度，会直接把列容器撑宽，导致三列总宽度超过行容器的100%，第三列就会被挤到新行。
• 栅格断点不匹配：col-lg-*的生效条件是视口宽度≥992px，如果你当前测试的浏览器窗口宽度小于992px，这些列会默认恢复为100%宽度，自动换行。
• 自定义样式冲突：如果有额外的自定义CSS给col类或者你指定的列ID添加了额外的margin、border、padding属性，也会增加列的总宽度，导致总宽度超出行容器限制触发换行。

修复方案 #

1. 给所有图片添加img-fluid类，让图片自适应列容器宽度，不会撑破布局，修改后代码示例如下：

<div class="row mt-3">
    <div class="col-lg-6" id="landscapePreviewColumn">
        <img class="img-fluid" id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
        <img class="img-fluid" id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
    </div>
    <div class="col-lg-3" id="portraitPreviewColumn">
        <img class="img-fluid" id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
        <img class="img-fluid" id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
    <div class="col-lg-3" id="socialPreviewColumn">
        <img class="img-fluid" id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
        <img class="img-fluid" id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
</div>

2. 如果需要在更小尺寸的屏幕上也保持横向三列布局，可以把col-lg-*替换为适配更小断点的类，比如col-md-*（适配≥768px视口）或者col-sm-*（适配≥576px视口）。
3. 检查自定义CSS规则，确认没有给列元素添加额外的边距、边框属性，避免总宽度溢出。

内容的提问来源于stack exchange，提问作者János