解决bootstrap4栅格布局缩放时，宽度超出导致换行

环境/工具： angular6+bootstrap4整合。

问题： 使用bootstrap栅格布局，由于有2个子内容需要显示，选用了2个col-md-6并排，但是浏览器缩放的时候会出现自动换行，这与栅格系统响应式布局的初衷是不符的。因为使用栅格系统是希望无论窗口如何缩放，col始终根据窗口内容自动调整宽度。

解决方法/结论： 使用col-x（如col-6）而非col-md-x（如col-md-6），具体看下面的代码和图示。

修改前代码：
简单起见，在angular工程中的app.component.html文件中添加如下代码做示例，其他文件（如ts等）不做修改

<div style="width: 100%; height: 100%;">
    <div class="col-md-12" style="min-width: 1650px">
        <div class="row" style="overflow: auto;min-width: 1650px">
            <div class="col-md-6" style="min-width: 800px">
                <p style="background-color: pink">left</p>
            </div>
            <div class="col-md-6" style="min-width: 800px">
                <p style="background-color: purple">right</p>
            </div>
        </div>
    </div>
</div>

未缩放

缩小浏览器窗口，此时右侧的col-md-6已经自动换行到第二行

修改后代码 只是将col-md-6换为col-6，而且外层的col-md-12替换与否好像并没有什么影响。

<div style="width: 100%; height: 100%;">
    <div class="col-md-12" style="min-width: 1650px">
        <div class="row" style="overflow: auto;min-width: 1650px">
            <div class="col-6" style="min-width: 800px">
                <p style="background-color: pink">left</p>
            </div>
            <div class="col-6" style="min-width: 800px">
                <p style="background-color: purple">right</p>
            </div>
        </div>
    </div>
</div>

修改后再次缩放浏览器，出现水平滚动条（需要在父容器中设置overflow:auto）

向右侧水平滚动

问题解决！