Bootstrap 4容器流体多余的边距 [英] Bootstrap 4 container fluid unwanted margins

问题描述

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

I'm writing a page in html using Bootstrap 4.2. I would like to have a horizontal navigation bar at the top of the page, that occupies the whole width of the page, and remains static during navigation.

我试图在类"container-fluid"中使用一些div.问题是条形图的左侧和右侧都出现了页边空白

I tried to use a few divs with the class "container-fluid". The problem is that a margin appears on the left and right side of the bar

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

有人知道如何使这些多余的边距消失吗?我尝试过不使用容器-流体"类，但是页边距出现在右侧，并且我也不想要水平滚动条.

Does anyone know how to make these unwanted margins disappear? I tried without the "container-fluid" class, but then the margin appears on the right side, with a horizontal scroll that I don't want either.

非常感谢您

推荐答案

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

container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0 which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0 class.

但是，如果您想要的是导航，那么您应该使用的是Bootstrap的导航组件:

But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/

这篇关于Bootstrap 4容器流体多余的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！