Bootstrap 4导航栏颜色

问题描述：

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

<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>

我认为你缺少一些答案中建议的'navbar-dark'。快速代码片段https://*.com/a/47900899/2797254 –

答

更新2018

引导4.0.0：

这里的CSS，这将改变导航栏的颜色在引导4 ...

/* 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:hover .nav-link { 
    color: #ffffff; 
}

演示：http://www.codeply.com/go/U9I2byZ3tS

~~还记得BS4仍然在alpha中，所以这些类可能会改变。~~ 另外，标记中的bg-danger将覆盖整体背景颜色。如果导航栏颜色较浅，则使用。这将影响文本的颜色和color of the toggler icon as explained here。

答

下面是一个更简单的方法来更改导航栏的背景颜色。

在您的.navbar上使用.navbar-dark并为您的自定义背景颜色创建样式，如.bg-company-red。 .navbar-dark将使您的所有链接变白。

HTML

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

CSS样式...

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

嗨！我正在使用所有我的外部CSS文件的webpack。一旦我尝试从Bootstrap 4覆盖样式，我必须使用'！important'规则，否则它们不会被应用。自定义机制在v4中是否发生了变化？使用v3我没有这样的问题 – Kuzma

您可能只需要在CSS选择器中更加具体，这样就不需要使用'！important'。所以，而不是'.special-class'尝试'body>头> .special-class'。复制Bootstrap正在使用的选择器，然后确保在引导样式之后包含替代样式。 – Chad

感谢您的咨询！我尝试了很多组合，但只有'重要！'更改属性。非常奇怪的情况... – Kuzma

答

我知道了。这很简单。使用类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">

答

如果你阅读引导4文档，Color schemes，它会回答你的问题。

Bootstrap 4导航栏颜色

相关推荐