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

标签 html css bootstrap-4 containers margin

<分区>

我正在使用 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”类,但随后边距出现在右侧,带有我也不想要的水平滚动条。

非常感谢您,

最佳答案

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

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

关于html - Bootstrap 4 容器流体不需要的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53966019/

上一篇:css - 如何设置具有相同类名的嵌套 div 的样式?

下一篇:html - 覆盖表格特定单元格的单元格填充

相关文章:

javascript - 使谷歌地图响应调整大小

php - 如何创建一个 css 类的多个实例?

html - 使 Bootstrap 4 导航栏搜索框扩展到可用空间

javascript - 使用下拉菜单显示特定的数据表

html - 如何更改选择框箭头

html - Bootstrap 表单元素未以水平形式对齐

javascript - 使用 CSS 重置位置

jquery - 内部有固定元素的可滚动 div

html - 使用 Bootstrap 4 垂直对齐卡片中的元素

css - Bootstrap 模式弹出窗口使屏幕变暗,但屏幕的少数部分仍显示在同一级别并且不会变暗