Bootstrap v4 nicht Zeile Padding

Question

Ich verwende Bootstrap V4 Alpha und ich mache Reihen.

Ich erwarte jedoch, dass die Zeilen Abstand haben. Also mit jeder Zeile, die ich erstelle, entstehen nur Lücken unter der ersten Reihe ohne Platz. Ich muss daher die Bootstrap-Hilfsklassen wie p-b-3 verwenden, um Zeilen zu verteilen.

Habe ich vielleicht etwas ausgeschaltet?

<div class="container"> 
    <div class="row"> 
     <main role="content" class="col-xs-12 col-md-8"> 
      <div class="row heading-wrapper"> 
      <div class="col-xs-10"> 
       <h1>testing gutters</h1> 
      </div> 
      <div class="col-xs-2 p-r-0 pull-xs-right"> 
       <div class="utility-menu"> 
       <i class="fa fa-life-ring utility-icon " aria-hidden="true"></i> 
       <i class="fa fa-chevron-down menu-chev" aria-hidden="true"></i> 
       </div> 
      </div>   
      </div><!-- /row --> 

<div class="row p-b-2" style="background-color:blue;"> 
     <div class="col-sm-4"> 
      <div class="test" style="display:block; height:50px; background:red;">This is test</div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="test" style="display:block; height:50px; background:green;">This is test</div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="test" style="display:block; height:50px; background:blue;">This is test</div> 
     </div> 
    </div> 

    <div class="row" style="background-color:blue;"> 
     <div class="col-sm-4" > 
      <div class="test" style="display:block; height:50px; background:orange;">This is test</div> 
     </div> 
     <div class="col-sm-4" > 
      <div class="test" style="display:block; height:50px; background:gray;">This is test</div> 
     </div> 
     <div class="col-sm-4" > 
      <div class="test" style="display:block; height:50px; background:black;">This is test</div> 
     </div> 
    </div> 


     </main> 
     <aside class="col-xs-12 col-md-4" style="background-color:blue;"> 
      <p>This is the aside</p> 
     </aside> 
    </div> 
</div> 

Answer 1

Auf Bootstrap4 row s haben keine Regel für padding-top oder padding-bottom standardmäßig. Wenn Sie dieses Verhalten erreichen wollen, schlage ich vor, das Hinzufügen der neben dem benutzerdefinierten CSS:

.row { 
    padding-bottom : 2rem; /*For adding a 2rem padding to the bottom of each row*/ 
} 

Hoffe, es hilft

Answer 2

Es ist scheint, dass etwas aus dem letzten vertion (alpha 5) geändert hat. Sie müssen "p-b-3" in "pb-3" ändern. Probieren Sie es aus!