Is no padding on `col` in Bootstrap 4 Grid System normal?

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/43357693/is-no-padding-on-col-in-bootstrap-4-grid-system-normal

标签

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4