Bootstrap 4容器，行，列与水平滚动[重复]答案

【问题标题】：Boostrap 4 container, row, col with horizontal scrolling [duplicate]Bootstrap 4容器，行，列与水平滚动[重复]
【发布时间】：2019-07-23 19:14:55
【问题描述】：

Bootstrap 4 有没有一种方法可以创建一个类似表格的结构，其中包含“容器”、“行”和“列”，容器扩展超出页面宽度，从而产生水平滚动区域。

在我现在的示例中，当区域用完不适合显示表格的空间时，该行的列总是换行到下一行。

【问题讨论】：

反对使用actual tables
没什么，但它会导致整个页面滚动。页面的页眉和页脚是响应式的，因此它们也会滚动到视图之外。

标签： css bootstrap-4

【解决方案1】：

可能您正在寻找的是阻止列换行，有一个类似的问题here

基本上将row 与.flex-nowrap 类一起使用

我同意评论中的@cloned - 以表格格式显示数据，使用表格标签绝对没有问题，引导程序也可以帮助您解决这些问题：table documentation from bootstrap

【讨论】：

是的，差不多。现在我得到了一个在浏览器视图之外展开的表格，并且浏览器显示了一个水平（和垂直）滑块。我想要的只是表格而不是整个页面的滑块
我认为 .table-responsive 可以满足我的需要
是的，你需要在外部 div 上获得我想要的 .table-responsive 和在 .row div 上获得 .flex-nowrap。

【解决方案2】：

这是一个适合我的例子。很酷的东西。

@{
    ViewBag.Title = "Home Page";
}

<div>
    <h1>Content</h1>
    <p>Dit is de content van de site</p>
    <div>
        <div class="table-responsive text-nowrap" >
            @for (int i = 0; i < 20; i++)
            {
                <div class="row flex-nowrap">
                    @for (int index = 0; index < 12; index++)
                    {
                        <div class="col">Column @index</div>
                    }
                </div>
            }
        </div>
    </div>
</div>

【讨论】：