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.

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?

回答1:

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

来源：https://stackoverflow.com/questions/52276191/bootstrap-grid-layout-when-div-is-removed