Question

我正在使用Bootstrap 4.2用html编写页面。我想在页面顶部放置一个水平导航栏，该导航栏占据页面的整个宽度，并且在导航过程中保持静态。

我尝试在“ container-fluid”类中使用一些div。问题是条形图的左侧和右侧出现了空白

以下是我在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>

有人知道如何使这些多余的边距消失吗？我尝试过不使用“容器-流体”类，但是页边距出现在右侧，并且我也不希望水平滚动。

非常感谢您

Answer 1

不确定这是否是您要寻找的东西

这里是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 2

我认为bootstrap“ row”类增加了一些边距（15px）。也许您可以添加一个自己的类来增加边距：0。或者删除行类

我希望能有所帮助！

谢谢。

Answer 3

container-fluid的padding-left和padding-right分别为15px和15px。您可以通过添加类px-0来覆盖它，该类的左侧和右侧填充为0。然后，您将不得不使用mx-0类覆盖该行的15px边距。

但是，如果要使用它，则应该使用Bootstrap的nav组件：https://getbootstrap.com/docs/4.1/components/navbar/

Bootstrap 4容器流体多余的边距

3 个答案: