Bootstrap v4 不应用行填充答案

【问题标题】：Bootstrap v4 not applying row paddingBootstrap v4 不应用行填充
【发布时间】：2016-11-03 22:39:08
【问题描述】：

我正在使用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>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

默认情况下，在 Bootstrap4 rows 上，padding-top 或 padding-bottom 没有任何规则。如果你想实现这种行为，我建议在你的自定义 CSS 旁边添加：

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

希望对你有帮助

【讨论】：

【解决方案2】：

似乎与上一个版本（alpha 5）相比有所改变。您必须将“p-b-3”更改为“pb-3”。测试一下！

【讨论】：