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

编辑:这是一个小提琴.

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类定义。