Как я могу скрыть пустые столбцы сетки?

Question

Я использую bootstrap, чтобы создать отзывчивый шаблон для 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

Это возможно. Это особенно полезно в системах CMS, таких как dotnetnuke, где вы не всегда знаете, будет ли какой-либо контент в столбцах, потому что пользователи добавляют свой контент в столбцы.

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