Bootstrap 4 Grid System中的`col`沒有填充是否正常？

Question

我第一次使用Bootstrap v。4。

我有一個footer正在使用新的flexcol的和它在桌面上效果很好。但是當我切換到移動設備時，它們彼此緊密堆疊，沒有垂直邊距/填充。

這是正常的行爲？

此外，我寧願內容居中或至少有一些偏移量。但是使用偏移量會導致頂部填充而不是左側或右側偏移量。

是那正常行爲？

如果是這樣，那麼推薦的「官方」方法是隻在移動設備上添加頂部邊距/填充並抵消？

謝謝！

無偏移：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row" id="kpc-row-10"> 
 

 
    <div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 
     
 
     <div class="col-sm"> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
    
 
</div>

隨着偏移：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row" id="kpc-row-10"> 
 

 
    <div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 
     
 
     <div class="col-sm offset-sm-2"> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
    
 
</div>

Answer 1

「他們是如此緊密地堆疊彼此沒有垂直邊距/填充」

正如意見已經說過了，in other questions，有自舉列之間沒有垂直間距。然而，自舉4具有spacing utility classes可以利用調整頁邊距或填充...

例如my-3會頂部和底部（y軸）餘量添加到每一列。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
     <div class="col-sm my-3"> 

     </div> 
    </div> 
</div> 

演示：http://www.codeply.com/go/ABUaBgCNbE

看到我的其他答案在spacing utilities更多信息。