Bootstrap 4 个容器流体不需要的边距

Question

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

我尝试在 class "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" class，但随后边距出现在右侧，带有我也不想要的水平滚动条。

非常感谢您，

Answer 1

我认为 bootstrap "row" class 增加了一些边距 (15px)。也许你可以添加一个自己的 class 来使边距：0。或者删除行 class

希望对您有所帮助！

谢谢。

Answer 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>

Answer 3

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

覆盖行的 15px 边距

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

Bootstrap 4 个容器流体不需要的边距

Bootstrap 4 container fluid unwanted margins

html

css

containers

margin

bootstrap-4