Question

我第一次使用Bootstrap v.4。

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

这是正常行为吗？

另外，我更喜欢内容居中或至少有一些偏移。但是使用偏移导致顶部填充而不是左或右偏移。

正常行为？

如果是这样，那么在移动设备上添加上边距/填充和偏移的推荐“官方”方法是什么？

谢谢！

没有偏移：

<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，Bootstrap中的列之间没有垂直间距。但是，Bootstrap 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的更多信息，请参阅我的其他答案。

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

1 个答案: