Question

我正在创建一个具有4列网格系统的引导页面。但是，其中2个将是隐藏列。一个在左边，一个在右边。当用户单击左侧的切换按钮时，用户可以看到3列，就像明智一样，单击右侧的切换按钮将显示4列。

如何在bootstrap网格中使用？

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的看法。我添加了一个橙色边框使得更明显（但你可以删除它）

<强>代码

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap 4列，2隐藏

2 个答案: