Bootstrap v4 不应用行填充

Question

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

但是我希望行有间距。因此，对于我创建的每一行，它只是在第一行下方折叠而没有任何 space。因此，我不得不使用 bootstrap 助手类例如 p-b-3 以便 space 输出行。

我是不是关掉了一些东西？

<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

在 Bootstrap4 上，rows 默认没有 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 不应用行填充

Bootstrap v4 not applying row padding

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4