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

请记住，无论CSS覆盖你定义必须是相同的CSS特异性或更高才能正确覆盖Bootstrap的CSS。

Bootstrap 4.1 +

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

这是将在Bootstrap 4中更改任何相关Navbar颜色的CSS ...

/* 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;
}

演示：discussion

覆盖Navbar Light或Dark

如果您使用的是Bootstrap 4 Navbar navbar-light或navbar-dark类，请在覆盖中使用此类。例如，更改Navbar链接颜色...

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

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

透明导航栏

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

相关：color of the toggler icon as explained here

Answer 2

更新2019年 - Bootstrap v4.1 +

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

只需使用.navbar-dark代替.navbar-light，然后添加自定义背景颜色类，如.bg-company-red

.navbar-dark会将您的所有链接设为白色。

HTML

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

CSS样式......

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

有关官方文档，请参阅http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes。

Answer 3

我明白了。这很简单。使用bg类可以轻松实现这一目标。让我告诉你：

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

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

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

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

Answer 4

如果您阅读了bootstrap 4文档Color schemes，它将回答您的问题。

Answer 5

您可以像这样在背景颜色属性值前面编写！important 它将更改链接的颜色。

.nav-link {
    color: white !important;
}

Answer 6

要更改navbar背景颜色：

.navbar-custom {

    background-color: yourcolor !important;
}

Answer 7

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">

因此，您在这里有这段代码，您必须知道bg-danger具有某种颜色。现在，如果要为页面提供一些自定义颜色，则只需将bg-danger更改为bg-color。然后，要么创建单独的css文件，要么可以在同一style中使用tag元素进行锻炼。只要这样做-

`<nav class="navbar navbar-toggleable-md navbar-light bg-color" style="background-color: cyan;">` .

那样就可以。

Answer 8

您可以使用“!important”来获取自定义颜色

.navbar {
 background-color: yourcolor !important;
 }

Bootstrap 4导航栏颜色

8 个答案: