Question

Bootstrap 4是否有一种方法可以创建一个带有'container'，'row'和'col'的表格结构，并带有一个扩展到页面宽度之外的容器，从而形成一个水平滚动区域。

在示例中，当该区域的空间不足时，该行的列将始终换行到下一行，这对于显示表格来说是不希望的。

Answer 1

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

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

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

Answer 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>

Boostrap 4容器，行，列与水平滚动

2 个答案: