Question

我正在使用Bootstrap V4 Alpha而我正在制作行。

但是我希望行有间距。因此，我创建的每一行都只是在第一行下方没有任何空间。因此，我必须使用引导辅助类（如p-b-3）来分隔行。

我有没有把事情搞砸了？

<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

On Bootstrap4 row默认情况下没有padding-top或padding-bottom的任何规则。如果您想实现此行为，我建议您在自定义CSS中添加下一个：

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

希望有所帮助

Answer 2

似乎某些事情已从最后一次转换（alpha 5）发生了变化。你必须将“p-b-3”改为“pb-3”。测试一下！

Bootstrap v4不应用行填充

2 个答案: