动态调整Bootstrap布局

Question

我有点问题。我实现了类似的东西：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-3">Test 1</div>
      <div class="col-xs-3">Test 2</div>
      <div class="col-xs-3" ng-if="test">Test 3</div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-3">Test 4</div>
      <div class="col-xs-3">Test 5</div>
      <div class="col-xs-3">Test 6</div>
    </div>
  </div>
</div>

我怎样才能以最简单的方式实现，一旦我用test禁用“Test 3”div，“Test 4”div就会占据它的位置？真正的代码更复杂，但基本上所有东西都需要动态浮动，以便不会创建空白区域。

Answer 1

将所有col-*放在一个row ..

中

<div class="container">
  <div class="row">
      <div class="col-xs-3">Test 1</div>
      <div class="col-xs-3">Test 2</div>
      <div class="col-xs-3" ng-if="test">Test 3</div>
      <div class="col-xs-3">Test 4</div>
      <div class="col-xs-3">Test 5</div>
      <div class="col-xs-3">Test 6</div>
    </div>
</div>

这称为Bootstrap column wrapping。