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

Posted 2023-03-06

【中文标题】Bootstrap：没有外部边距的流畅布局

【英文标题】：Bootstrap: fluid layout with no external margin

【发布时间】：2013-01-02 06:34:12

【问题描述】：

如果我有：

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

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

感谢您的支持

【参考方案1】：

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

.container-fluid 
    padding: 0px;

此外，如果您使用的是响应式引导程序，您还需要这样：

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

编辑：这里是a js fiddle。

【讨论】：

在这种情况下，您的内容将粘在窗口边框上。

Bootstrap 4，在这个有用的答案之后很久才发布，现在有实用程序类。您基本上将p-0 添加到容器中。我已经发布了一个解释细节的答案：***.com/a/54589229/199263

【参考方案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 类定义。

【讨论】：

如果你这样做，由于屏幕右侧有 15px 的空白空间，你最终会得到一个水平滚动条。您忽略了 row 类的负边距，这就是容器上存在填充的原因。您还可以通过将m-0 类添加到每个***行来修复（行中的任何行都不需要它）。

@CraigBrown 此评论大于答案。 <div class="container-fluid p-0"> <div class="row m-0"> <div class="row">

p-0 做到了。这是一个最佳答案，因为您不接触 .css 而是使用引导元素。