bootstrap-4 - 删除 div 时的 Bootstrap 网格布局

Question

因此，我正在使用一个仪表板外观，它有可能具有四个可以打开的“方 block ”，并且角色取决于用户角色。

顶行通常是左边的，因为它有大约 30% 的正方形，而另一行大约有 70% 的宽度。这可以。

但是，在仪表板的底行，您可以有两个方 block 。当这两个打开时，我当前的网格设置工作得很好，但是当用户“隐藏”一个方 block 时，另一个方 block 不会占据整行。

这就是我目前所拥有的。我无法发布其中的任何元素，但这是大纲。

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-5"></div>
    <div class="col-lg-9 col-md-8 col-sm-7"></div>

</div>
<div class="row">
    <div class="col-lg-6 col-md-8 col-sm-6">
    </div>
    <div class="col-lg-6 col-md-8 col-sm-6">
    </div>
</div>

对此有任何解决方案，或者我是否必须处理某种后端逻辑以查明用户是否显示了所有四列或仅显示了三列？

Answer 1

您可以使用 auto-layout col columns这将填满宽度...

<div class="row">
    <div class="col">
        ...
    </div>
    <div class="col">
        ...
    </div>
</div>

https://www.codeply.com/go/Y0WwVS7KMd