私はBootstrap V4 Alpha
を使用していますが、行を作成しています。ブートストラップv4で行パディングが適用されない
しかし、私は行に間隔があることを期待しています。だから、すべての行で私はそれを作成するだけで、最初の行の下に何もスペースなしでcolapses。したがって、行間を埋めるために、p-b-3
などのブートストラップヘルパークラスを使用する必要があります。
私はおそらく何かをオフにしましたか? Bootstrap4で
<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>