Bootstrap 4 Столбцы, 2 Скрытые

Question

Я создаю страницу начальной загрузки, которая будет иметь систему с четырьмя столбцами. Однако 2 из них будут скрытыми столбцами. Один налево и один направо. Когда пользователь нажимает кнопку переключения слева, пользователь может видеть 3 столбца, например, мудрый, нажав кнопку переключения справа, отобразит 4 столбца.

Как это сделать, используя сетку загрузки?

Answer 1

Концепция здесь является то, что на .click() я делаю следующее:

• Я удалить все col-lg-* классы на основе того, как существует много .hidden столбцов.
• Переключить класс .hidden для первого или последнего столбца.
• Я добавляю правильный класс col-lg-*, в зависимости от того, сколько столбцов существует .hidden.

HTML

<p> 
    <button class="btn btn-info toggle-item toggle-first">Toggle first column</button> 
    <button class="btn btn-info toggle-item toggle-last">Toggle last column</button> 
</p> 
<div class="row"> 
    <div class="first column hidden"> 
     first column 
    </div> 
    <div class="column col-lg-6"> 
     second column 
    </div> 
    <div class="column col-lg-6"> 
     third column 
    </div> 
    <div class="last column hidden"> 
     fourth column 
    </div> 
</div> 

JavaScript

jQuery('.toggle-item').click(function() { 
    var count = jQuery('.column.hidden').length; 
    if (count === 2) { 
     jQuery('.column').removeClass('col-lg-6'); 
    } else if (count === 1) { 
     jQuery('.column').removeClass('col-lg-4'); 
    } else if (count === 0) { 
     jQuery('.column').removeClass('col-lg-3'); 
    } 

    if (jQuery(this).hasClass('toggle-first')) { 
     jQuery('.column.first').toggleClass('hidden'); 
    } else { 
     jQuery('.column.last').toggleClass('hidden'); 
    } 

    count = jQuery('.column.hidden').length; 
    if (count === 2) { 
     jQuery('.column').addClass('col-lg-6'); 
    } else if (count === 1) { 
     jQuery('.column').addClass('col-lg-4'); 
    } else if (count === 0) { 
     jQuery('.column').addClass('col-lg-3'); 
    } 
}); 

Вот demo

Answer 2

Это мой взгляд на это с помощью JQuery и Bootstrap. Я добавил оранжевый бордюр, чтобы сделать более очевидной (но вы можете удалить его)

Код

$(function() { 
 
    $(".btn-primary").on('click', function() { 
 
    $(".first-col").toggle();  
 
    updateColumnWidth($(".col:visible").length); 
 

 
    }); 
 

 
    $(".btn-danger").on('click', function() { 
 
    $(".last-col").toggle();  
 
    updateColumnWidth($(".col:visible").length); 
 
    }); 
 

 
    var updateColumnWidth = function(numOfColumns) { 
 
    $(".col").removeClass('col-xs-3 col-xs-4 col-xs-6'); 
 

 
    switch (numOfColumns) { 
 
     case 2: 
 
     $(".col").addClass('col-xs-6'); 
 
     break; 
 
     case 3: 
 
     $(".col").addClass('col-xs-4'); 
 
     break; 
 
     case 4: 
 
     $(".col").addClass('col-xs-3'); 
 
     break; 
 
    } 
 
    } 
 
});

.col-xs-3, .col-xs-4, .col-xs-6 { 
 
    border: 1px solid orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div class="row well"> 
 
    <div class="col col-xs-3 first-col"> 
 
    col 1 
 
    </div> 
 
    <div class="col col-xs-3"> 
 
    col 2 
 
    </div> 
 
    <div class="col col-xs-3"> 
 
    col 3 
 
    </div> 
 

 
    <div class="col col-xs-3 last-col"> 
 
    col 4 
 
    </div> 
 
</div> 
 

 
<button class="btn btn-primary">Show/Hide Col 1</button> 
 
<button class="btn btn-danger">Show/Hide Col 4</button>