Bootstrap 4导航栏颜色

Question

在Bootstrap 4中，如何更改导航栏的背景颜色？ twbscolor的代码不起作用。我想使背景颜色为不同颜色，字体颜色为白色。

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Jordan Baron</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
            </ul>
        </div>
    </nav>

Answer 1

更新2019年

请记住，为了正确覆盖Bootstrap的CSS，您定义的CSS覆盖必须具有相同的CSS特性或更高。

Bootstrap 4.1+

默认情况下，导航栏是透明的。如果您只想更改背景颜色，可以通过将颜色应用于<navbar class="bg-custom">来完成，但请记住，这不会更改其他颜色，例如链接，悬停和下拉菜单颜色。

这里的CSS将改变Bootstrap 4中任何相关的Navbar颜色......

/* change the background color */
.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

但是：Kua zxsw指出

---

覆盖Navbar Light或Dark

如果您使用的是Bootstrap 4 Navbar http://www.codeply.com/go/U9I2byZ3tS或navbar-light类，请在覆盖中使用它。例如，更改Navbar链接颜色......

navbar-dark

---

在进行任何Bootstrap自定义时，您需要了解CSS特性。自定义CSS中的覆盖需要使用与bootstrap.css一样具体的选择器。

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #ffffff;
}

---

透明导航栏

请注意，Bootstrap 4 Navbar默认是透明的。使用Read more作为深色/粗体背景颜色，如果导航栏颜色较浅则使用navbar-dark。这将影响文本和navbar-light的颜色。

相关：color of the toggler icon as explained here

Answer 2

更新2019年 - Bootstrap High 1 +

这是更简单的更改导航栏背景颜色的方法。

只需使用https://stackoverflow.com/a/18530995/171456而不是.navbar-dark并添加自定义背景颜色类，如.navbar-light

.bg-company-red将使您的所有链接变白。

HTML

.navbar-dark

CSS风格......

<nav class="navbar navbar-dark bg-company-red">

有关官方文档，请参阅

.bg-company-red {
    background-color: darkred !important;
}

。

Answer 3

我知道了。这很简单。使用bg类可以轻松实现这一目标。让我演示给你看：

http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes

这为您提供了默认的蓝色导航栏

如果您想更改自己喜欢的颜色，只需使用导航中的样式标记即可：

 <nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

Answer 4

如果您阅读了bootstrap 4文档<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000"> ，它将回答您的问题。

Answer 5

你可以写这么重要的背景颜色属性值这样会改变链接的颜色。

Color schemes