自舉：強制列的垂直堆疊上移動（自適應設計）

Question

我有以下代碼：

<div class='carousel'> 
    <div class='data-ng-repeat='{{ repeat }}'{% endif %}> 
     <div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat='i in items'> 
      <div class='valign'> 
      <p class='body'> 
       <span> {$ i.statistic $} </span> 
       <span> {$ i.text $} </span> 
      </p> 
      </div> 
     </div> 
     </div> 
</div> 

用下面的CSS：

.vdivide:not(:last-child) { 
    border-right: 1px solid rgba(196, 187, 159, 0.63); 
} 
.carousel { 
    height: 300px; 
} 

我因此具有4列用棒將它們分開。 當我切換到手機屏幕時，我希望它們可以很好地疊加。 任何想法如何使用引導程序來做到這一點？

Answer 1

除了使用正確的列類名之外，您不需要執行任何操作。看the examples provided：

引導程序3網格系統具有類四層：XS（電話），SM（片），MD（臺式機），和LG（較大桌面）。您幾乎可以使用這些類的任意組合來創建更加動態和靈活的佈局。

每一層的級別都會放大，這意味着如果您計劃爲xs和sm設置相同的寬度，則只需指定xs。

所以，桌面上的4列（堆放在其他地方），只是在你的重複div，除暴安良.col-xs-12.col-sm-3使用.col-md-3。

注意：我真的建議不要將您自己的表示CSS類添加到您的列。保持網格完全分離，並在其中添加額外的標記以實現同樣的目標：您將使自己的生活變得更簡單。