使用引導程序在移動設備上縱向堆疊列

Question

當屏幕尺寸低於600px左右時，如何讓這些列垂直堆疊？

我附加了一張圖片，看它如何看320px（非常壓扁）。

<div class="container-fluid"> 
    <div class="row justify-content-md-center"> 
     <div class="col-12 col-sm-4 offset-sm-2"> 
      <p></p> 
     </div> 

    <div class="row justify-content-md-center"> 
     <div class="col-12 col-sm-4 offset-sm-2"> 
      <p></p> 
     </div> 
    </div> 

    <div class="row justify-content-md-center"> 
     <div class="col-12 col-sm-4 offset-sm-2"> 
      <p></p> 
     </div> 

    <div class="row justify-content-md-center"> 
     <div class="col-12 col-sm-4 offset-sm-2"> 
      <p></p> 
     </div> 
    </div> 
</div> 

感謝您的幫助。

Answer 1

該代碼缺少幾個關閉div標籤。您應該將列放在單行中，而不是每次都使用新行，因爲您只使用Bootstrap網格的1/3。

<div class="container-fluid"> 
    <div class="row justify-content-md-center"> 
     <div class="col-12 col-sm-4"> 
      <div class="card card-block"></div> 
     </div> 
     <div class="col-12 col-sm-4"> 
      <div class="card card-block"></div> 
     </div> 
     <div class="col-12 col-sm-4"> 
      <div class="card card-block"></div> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/0RCKNb2fvY