Bootstrap 4 网格系统中的 `col` 没有填充是否正常？

Question

我是第一次使用 Bootstrap v.4。

我有一个 footer 使用新的 flex col，它在桌面上运行良好。但是当我切换到移动设备时，它们彼此堆叠得如此紧密，没有垂直边距/填充。

这是正常行为吗？

此外，我希望内容居中或至少有一些偏移。但是使用偏移会导致顶部填充而不是左侧或右侧偏移。

这是的正常行为吗？

如果是这样，建议 "official" 仅在移动设备上添加顶部 margin/padding 和偏移量的方法是什么？

谢谢！

无偏移：

<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

"they're stacked so closely to each other there is no vertical margin / padding"

如评论中所述，in other questions, there is no vertical spacing between columns in Bootstrap. However, Bootstrap 4 has spacing utility classes 您可以使用它来调整边距或填充...

例如 my-3 将为每列添加 top 和 bottom（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

有关 的更多信息，请参阅我的其他答案。