如果我使用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代码不对？
最佳答案
在Bootstrap 3中，列表组具有margin-bottom: 20px，但是在4.x中，列表组没有底边距。
您可以使用新的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
关于html - bootstrap 3和4之间的行填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43778549/