Bootstrap 4：如何使用容器流体拥有全宽导航栏？答案

【问题标题】：Bootstrap 4 : How to have a full width navbar with the container-fluid?Bootstrap 4：如何使用容器流体拥有全宽导航栏？
【发布时间】：2021-04-11 04:34:11
【问题描述】：

我在容器流体中有一个 Bootstrap 导航栏，我需要让导航栏填充容器流体的所有重量，请有人帮忙。如果我将导航栏放在容器流体之外，我的问题就解决了，但我需要在 CSS 中做同样的事情，因为我无法访问 HTML 代码。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

使用这个 css 代码。

.container-fluid {
    margin: 0!important;
    padding: 0!important;
}

【讨论】：

是的，它可以工作，但是在这里我们改变了 boostrap 行为和所有其他容器流体，没有办法只改变导航栏 css 吗？
你能分享你的包含容器流体的代码吗？
使用 CSS 选择器，例如“header .container-fluid {}”。它仅适用于该容器流体。
好的，我做了这个代码：jsfiddle.net/qxf9naph/25
恭喜！我想你可以认可我的回答。 :)

【解决方案2】：

使用 css 很容易：

.navbar {
   margin: 0 -2rem 0 -2rem;
   width: auto;
 }

https://jsfiddle.net/2dszau7y/18/

【讨论】：