如何隐藏空网格列？

Question

我使用引导程序为CMS创建响应模板。我想在主要区域有三列网格，但有时候，三列都没有内容。 CMS将向任何空的列添加一个类，因此我可以使用它来隐藏它们，但我无法使用引导程序来扩展其他两列以填充该区域。因此，如果我有三列全是col-md-4，但其中一列是隐藏的，我基本上希望其他列成为col-md-6。如果两个都是空的，我希望剩下的一个是col-md-12。但是，我没有运气。

任何想法？

Answer 1

通常您会使用PHP（或您特定的服务器端语言）逻辑来应用相应的Bootstrap类，具体取决于列中是否有内容。这可能不应该用CSS来完成。

Answer 2

我推荐使用与应用css样式相同的逻辑来添加bootstrap css类，例如“col-md-6”。像任何样式一样，可以根据需要添加或删除引导样式。

Answer 3

这是可能的。这在像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> 

你可以完全自动化这个，这里是开始，任何人都喜欢为我继续？ :)

$(document).ready(function(){ 
    $('.row').each(function() { 
    var row = $(this);  
    row.children().each(function() { 
     var col = $(this); 
     if col.is(':empty') 
     { 
     col.remove(); 
     /*TODO: we need to first count all empty cols, then divide those among non empty cols by changing their style*/ 
     } 
    }); 
    }); 
});