html - 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 中，列表组有 margin-bottom: 20px，但在 4.x 中，列表组没有 margin-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