Html 引导网格：当所有列不适合一行时，没有水平滚动

为什么不适合一行的列会转到底部，而不是显示水平滚动条

<div class="container-fluid main-container" style="overflow-x: auto; width:600px">
    <div class="row mx-5">
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 1 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 2 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 3 content
        </div>
        <div class="col-6 col-sm-6 col-md-3 col-lg-3 mx-4 mt-12">
            ...column 4 content
        </div>
    </div>
</div>

…第1栏内容
…第2栏内容
…第3栏内容
…第4栏内容

预期行为：

如果

4个div列

不适合一行，则应显示

水平滚动条

当前结果：

第4列位于

第1列、第2列和第3列的底部

结果的图像：

为什么要使用网格来执行此操作

试着用旋转木马。

引导使用百分比网格，您可以手动执行，如：


.container{
宽度：100%；
最大宽度：600px；
背景：红色；
溢出-x：滚动；
}
.容器.内容{
宽度：820px；
}
.集装箱{
显示：内联块；
宽度：200px；
高度：200px；
}
.container.box:第n个子项（1）{
背景：蓝色；
}
.容器.盒子：第n个子（2）{
背景：青色；
}
.容器.盒子：第n个孩子（3）{
背景：紫色；
}
.容器.盒子：第n个孩子（4）{
背景：灰色；
}

1.
2.
3.
4.
您可以使用
flex nowrap
类来实现您的目标



…第1栏内容
…第2栏内容
…第3栏内容
…第4栏内容