Bootstrap：流畅的布局，没有外部边距

Question

如果我有：

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span8">
             Some Element....
       </div>
       <div class="span4">
             Other Element
       </div>   
   </div>       
</div>

使用此代码，我可以从左右窗口边框获得一些余量。如何消除这些利润？

感谢您的支持

Answer 1

如果我理解你的问题，我相信你想要这个：

.container-fluid {
    padding: 0px;
}

此外，如果您使用自适应引导程序，您也需要这样：

@media (max-width: 797px) {
    body { 
        padding-left: 0px;
        padding-right: 0px;
    }
}

修改：此处为a js fiddle。

Answer 2

您看到的效果是由于container的填充所致。

您可以使用内置的Bootstrap 4 spacing utility classes来更改container的默认填充。

要删除填充，请将p-0添加到container：

<div class="container-fluid p-0">
    <div class="row">
      <div class="col-8">
         Some Element....
       </div>
       <div class="col-4">
          Other Element
       </div>   
    </div>       
</div>

使用内置实用程序类的好处是使CSS保持精简，并且不会修改默认的container-fluid类定义。