Bootstrap 4容器流体不需要的边距[重复]答案

【问题标题】：Bootstrap 4 container fluid unwanted margins [duplicate]Bootstrap 4容器流体不需要的边距[重复]
【发布时间】：2018-12-29 01:40:53
【问题描述】：

我正在使用 Bootstrap 4.2 编写一个 html 页面。我想在页面顶部有一个水平导航栏，它占据页面的整个宽度，并在导航期间保持静态。

我尝试使用一些带有“container-fluid”类的 div。问题是bar的左右两边都出现了margin

这是我在jsfiddle 中得到的示例

<div class="container-fluid">
      <div class="sticky-top shadow" id="containerMain">
        <div class="container-fluid bg-secondary text-light p-1">
          <div class="row align-items-center ">
            Line number one content here
          </div>
        </div>
        <div class="container-fluid filters bg-light align-items-center">
          <div class="row p-1">
            Line number two content here
          </div>
        </div>
      </div>
    </div>

有谁知道如何使这些不需要的边距消失？我尝试不使用“container-fluid”类，但随后边距出现在右侧，并带有我也不想要的水平滚动。

非常感谢您，

【问题讨论】：

标签： html css bootstrap-4 containers margin

【解决方案1】：

container-fluid 的 padding-left 和 padding-right 为 15px，这是您看到的差距。您可以通过添加类 px-0 来覆盖它，该类为左右填充 0。然后你必须用 mx-0 类覆盖行的 15px 边距。

但如果它是你想要的导航，那么你应该使用的是 Bootstrap 的导航组件：https://getbootstrap.com/docs/4.1/components/navbar/

【讨论】：

【解决方案2】：

不确定这是否是您要查找的内容：

这是jFiddle

  <nav class="fixed-top navbar-light bg-light m-0 p-0">
  <div class="container-fluid">
    <div class="row text-center text-light bg-secondary p-1">
      <div class="col">
        Line number 1 content here
      </div>
    </div>
     <div class="row text-center text-secondary bg-light p-1">
      <div class="col">
        Line number 2 content here
      </div>
    </div>
  </div>
 </nav>

【讨论】：

【解决方案3】：

我认为引导程序“行”类增加了一些边距（15 像素）。也许您可以添加一个自己的类来使边距：0。或者删除行类

希望对您有所帮助！

谢谢。

【讨论】：