如何隱藏空網格列？

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*/ 
     } 
    }); 
    }); 
});