bootstrap 3和4之间的行填充

Question

如果我使用Bootstrap 3，我会经常使用div.row，它会在垂直方向上给我一个很好的行间距。但是，当迁移到Bootstrap 4时，我注意到行不再有任何间距。

​

这是Bootstrap 4。

​

这是Bootstrap 3。

这是我的Bootstrap 4代码：

<div class="container">
  <div class="page-header col-8 offset-2">
    <h1>{{ title }}</h1>
  </div>

  <div class="row">
    <div class="col-8 offset-2">
      <ul class="list-group" *ngIf="showCities">
        <li class="list-group-item"
            *ngFor="let city of cities">{{ city.name }}
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-8 offset-2">
      <div class="input-group">
        <input type="text"
               class="form-control"
               placeholder="Nieuwe stad.."
               #newCity
               (keyup.enter)="addCity(newCity.value)">
        <span class="input-group-btn">
            <button class="btn btn-success"
                    type="button"
                    (click)="addCity(newCity.value)">Toevoegen</button>
        </span>
      </div>
    </div>
  </div>
</div>

如何获得相同的间距？我将bootstrap放在我的package.json中，它会编译到一个新的ng-cli项目中。我也使用sass，所以我可以覆盖一些变量，或者？或者是我的Bootstrap 4代码错了？

Answer 1

在Bootstrap 3中，list-group有margin-bottom: 20px，但在4.x中，list-group没有margin-bottom: 20px-bottom。

您可以使用新的spacing utils in 4.x向列表组添加边距。例如，mb-4将添加1.5rem;的下边距...

<div class="row">
        <div class="col-12">
            <ul class="list-group mb-4">
                <li class="list-group-item">Bootply</li>
                <li class="list-group-item">One itmus ac facilin</li>
                <li class="list-group-item">Secondp t eros</li>
            </ul>
        </div>
</div>
<div class="row">
        <div class="col-8">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Nieuwe stad..">
                <span class="input-group-btn">
            <button class="btn btn-success" type="button">Toevoegen</button>
        </span>
            </div>
        </div>
</div>

http://www.codeply.com/go/FmUSjJJX3V