layout - 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;
    }
}

编辑：这是一个 js fiddle。

Answer 2

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

您可以container使用内置的Bootstrap 4 间距实用程序类更改 的默认填充。

要删除填充，请添加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类定义。