twitter-bootstrap – 如何隐藏空网格列？

发布时间：2020-12-17 21:32:29 所属栏目：安全来源：网络整理

导读：我正在使用bootstrap为CMS制作响应式模板.我希望在主区域中有一个三列网格,但有时候,所有三列中都没有内容. CMS将为任何空列添加一个类,因此我可以使用它来隐藏它们,但我无法通过引导来扩展其他两列来填充该区域. 所以,如果我有三列都是col-md-4,但有一列是

我正在使用bootstrap为CMS制作响应式模板.我希望在主区域中有一个三列网格,但有时候,所有三列中都没有内容. CMS将为任何空列添加一个类,因此我可以使用它来隐藏它们,但我无法通过引导来扩展其他两列来填充该区域.

所以,如果我有三列都是col-md-4,但有一列是隐藏的,我基本上希望其他列成为col-md-6.如果两个是空的,我希望剩下的一个是col-md-12.但是,我没有运气.

有任何想法吗？

解决方法

有可能的.这在像dotnetnuke这样的CMS系统中尤其有用,因为用户在列中添加内容时,您并不总是知道列中是否有任何内容.

$( document ).ready(function(){
    if ($('.sideBar').is(':empty')) {
        $('.sideBar').remove()
        $('.myContent').removeClass('col-md-9').addClass('col-md-12');
    }
});

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sideBar">menu</div>
    <div class="col-md-9 myContent"></div>
</div>

你可以完全自动化,这是开始,有人喜欢继续我吗？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!