时间戳

首页 > 解决方案 > Bootstrap 4 容器流体不需要的边距

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

问题描述

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

我尝试在“容器流体”类中使用一些 div。问题是栏的左右两边出现了一个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”类，但随后边距出现在右侧，并带有我也不想要的水平滚动。

非常感谢您，

标签： htmlcssbootstrap-4containersmargin

解决方案

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

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

推荐阅读