Question

想象一下以下引导网格布局。主网8：4。

<div class="container">
    <div class="row">
        <div class="col-md-8">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

用户可以调整内容数据。他/她可以将内容放在较大的列中或较小的列中。

例如两个表。

<div class="row">
    <div>
        <table>
        </table>
    </div>
    <div>
        <table>
        </table>
    </div>
</div>

如果将两个表放在较大的列中，它们应该并排，直到满足某个断点，之后它们应该是一个在另一个之上。

如果两个表格放在较小的列中，它们应该总是一个在另一个上面，因为列太小而不能并排显示表格。

如何实现这一目标？只用CSS可以吗？

此外，如果布局太小，则应将两列放在另一列之上。这是由＆＃34; col-md - ＆＃34;类。但是，如果用户放置在较小列中的表和＆＃34; md＆＃34;到达断点的空间足够大，可以并排显示表格。这是可能的还是我必须忍受一些微小的差异？

Answer 1

是的，仅使用本机Bootstrap 4类就可以轻松实现这种嵌套。

您只需将行列对放入您选择的列中，如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-8 mb-3">
            <p>wide column</p>
            <div class="row">
                <div class="col-md-6">table 1 goes here</div>
                <div class="col-md-6">table 2 goes here</div>
            </div>
        </div>
        <div class="col-md-4">
            <p>narrow column</p>
            <div class="row">
                <div class="col-sm-6 col-md-12 col-lg-6">table 3 goes here</div>
                <div class="col-sm-6 col-md-12 col-lg-6">table 4 goes here</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

该代码将产生您描述的确切行为。在小于md的屏幕上，它们将叠加在彼此之上。否则，两个表将在相应的父列中占据50％的空间（12个中的6个单元）。

如果您确定在sm断点处，例如，还有足够的空间可以并排放置2个表，那么您可以将内部列的类更改为{{col-sm-6 1}}。然后他们会在那个断点处并排坐着。

请记住，当嵌套（甚至一般）时，你总是有行 - 列对，即一行总是需要至少一列。否则，您将遇到布局问题。

带有两个表

1 个答案: