使用Bootstrap时如何正确设置同行两列布局匹配预期显示效果

问题根源 #

你当前的代码给两列设置的网格规则是：仅在xl断点（≥1200px）下分别占4/12和8/12宽度，lg及以下所有断点都设为col-*-12占满整行，所以自然会上下堆叠，不会并排显示。
你后续改成col-6的操作是让所有尺寸的屏幕下两列都各占一半宽度，没有做断点适配，导致中大屏幕下内容区域宽度不足。

解决方案 #

根据Bootstrap移动端优先的网格规则，按需指定你想要开始并排的断点即可，比如想要在md断点（≥768px，平板及以上尺寸）就实现并排，仅需要修改两列的类属性：

1. 图片列替换原有列类为 col-md-4 col-12：md及以上宽度占4格，md以下占满整行
2. 内容列替换原有列类为 col-md-8 col-12：md及以上宽度占8格，md以下占满整行
3. 额外注意：图片列内部嵌套的container类会额外添加左右内边距，压缩图片区域的可用宽度，可以去掉这个多余的container类，避免宽度计算异常。

修改后完整代码 #

<div class="container">
    <div class="row">
        <div class="col-md-4 col-12 mb-md-0 mb-5">
            <div class="slider-slick-img">
                <div class="slider-for">
                IMAGE GOES HERE
                </div>

                <div class="slider-nav mt-5">
                    <div class="item px-2">
                    THUBMNAIL GOES HERE
                    </div>
                </div>
            </div>
        </div>  
        <div class="col-md-8 col-12 mb-md-0 mb-5">
            <div>
            CONTENT GOES HERE
            ...
            </div>
        </div>
    </div>
</div>  

如果想要更早（sm断点≥576px）就开始并排，把上面的col-md-*改成col-sm-*即可，可根据你的实际响应式需求调整断点参数。

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