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

查看:20
本文介绍了删除 div 时的 Bootstrap 网格布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我正在使用仪表板外观,它可能有四个方块"可以打开,角色取决于用户角色.

第一行通常是左边的,因为它有大约 30% 的正方形,另一行大约有 70% 的宽度.这可以.

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

这是我目前所拥有的.我不能张贴其中的任何元素,但这是大纲.

<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 class="row"><div class="col-lg-6 col-md-8 col-sm-6">

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

对此有什么解决方案,或者我是否必须使用某种后端逻辑来确定用户是显示所有四列还是仅显示三列?

解决方案

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

<div class="col">...

<div class="col">...

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

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?

解决方案

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆