Bootstrap 4网格系统中的`col`上的填充是否正常? [英] Is no padding on `col` in Bootstrap 4 Grid System normal?

问题描述

我是第一次使用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> 

解决方案

它们彼此堆叠得非常紧密，没有垂直边距/填充"

如评论中已经提到的，以及在其他问题中，Bootstrap中的列之间没有垂直间距.但是，Bootstrap 4具有 spacing实用程序类，您可以利用它来调整边距或填充...

例如，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实用程序的更多信息，请参见我的其他答案.

I'm using Bootstrap v. 4 for the first time.

I have a footer that is using the new flex col's and it works great on desktop. But when I switch to mobile they're stacked so closely to each other there is no vertical margin / padding.

Is this the normal behavior?

Also, I would prefer the content is centered or at least have some offset. But using offset results in top padding instead of left or right offset.

Is that normal behavior?

If so, what would be the recommended, "official", approach to adding top margin/padding on mobile only and offset?

Thank you!

Without Offset:

<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>

With Offset:

<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>

解决方案

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

As already mentioned in the comments, and in other questions, there is no vertical spacing between columns in Bootstrap. However, Bootstrap 4 has spacing utility classes you can utilize to adjust the margins or padding...

For example my-3 will add a top and bottom (y-axis) margin to each column.

<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>

Demo: http://www.codeply.com/go/ABUaBgCNbE

See my other answer for more info on the spacing utilities.

这篇关于Bootstrap 4网格系统中的`col`上的填充是否正常?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！