2016-09-09 6 views
0

私はBootstrap V4 Alphaを使用していますが、行を作成しています。ブートストラップv4で行パディングが適用されない

しかし、私は行に間隔があることを期待しています。だから、すべての行で私はそれを作成するだけで、最初の行の下に何もスペースなしでcolapses。したがって、行間を埋めるために、p-b-3などのブートストラップヘルパークラスを使用する必要があります。

私はおそらく何かをオフにしましたか? Bootstrap4で

enter image description here

<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> 

答えて

1

row sがデフォルトでpadding-topまたはpadding-bottomのための任意のルールを持っていません。あなたは、この動作を実現したい場合は、私はあなたのカスタムCSSの横を追加することをお勧め:

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

が、それはそれだ

0

のホープは、何かが最後vertion(アルファ5)から変更されているようです。 "p-b-3"を "pb-3"に変更する必要があります。それを試してみてください!

関連する問題