引導程序3和4之間的行填充

如果我使用引導程序3，我會使用div.row很多，它會給我一個垂直行之間很好的間距。但是，當遷移到Bootstrap 4時，我注意到行已經不再有空間了。引導程序3和4之間的行填充

這是引導4.

這是自舉3

這是我引導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代碼錯了？

來源

2017-05-04 jbehrens94

兩個引導版本中，'row'類沒有'保證金bottom'價值，但也許有另一種風格影響它 –

如果你想按照你的意願製作它，只需在定製樣式表中將'margin-bottom：15px'添加到'.row'中 –

在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

來源

2017-05-04 10:44:14 ZimSystem

引導程序3和4之間的行填充

回答

相關問題