动态调整自举布局

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禁用“实验3”格“测试4”格需要它地点？真正的代码更复杂，但基本上所有东西都需要动态浮动左侧，以便不会创建空白区域。

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。