删除div时的Bootstrap网格布局 [英] Bootstrap grid layout when div is removed

问题描述

因此，我正在使用仪表板外观，该外观可能具有四个可以打开的正方形"，并且这些角色取决于用户角色.

So I am working with a dashboard look that has the possibility of having four 'squares' that can be switched on and role dependant on a users role.

通常会保留第一行，因为它的正方形大约为30％，另一行的宽度大约为70％.这可以.

The top row usually is left as it so has square around 30% and the other is around 70% width. This is fine.

但是，在仪表板的底行上，您可以有两个正方形.当两个都打开时，我当前的网格设置就可以正常工作，但是当一个用户隐藏"一个正方形时，另一个正方形不会占据整个行.

However, on the bottom row of the dashboard, you can have two squares. When the two are switched on then my current grid setup works just fine but when a user has one square 'hidden' then the other square doesn't take up the whole row.

这是我到目前为止所拥有的.我无法发布其中的任何元素，但这是大纲.

This is what I have so far. I can't post any of the elements that are in it but here's the outline.

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

对此有任何解决方案，还是我必须处理某种后端逻辑才能确定用户是否显示了全部四列还是仅显示了三列?

Any solution to this or will I have to work on some sort of backend logic to find out if a user has all four columns shown or just three?

推荐答案

您可以使用自动布局col列，它将填充宽度...

You can use the auto-layout col columns which will fill the width...

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

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

这篇关于删除div时的Bootstrap网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！