如何更改 Bootstrap 切换导航颜色？答案

【问题标题】：How to change Bootstrap toggle navigation color?如何更改 Bootstrap 切换导航颜色？
【发布时间】：2014-06-06 11:12:12
【问题描述】：

据我所知，这是切换导航按钮的代码：

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

我添加了 id="nav-toggle-button" 并给了它这个 CSS：

#nav-toggle-button {
color: gray;
}

但什么都没有改变。我也尝试添加 !important ，但没有成功，我不知道还能尝试什么。有人知道吗？

编辑：这是 Prashant123 建议的解决方案的小提琴（抱歉，没有足够的声誉来投票赞成您的答案！）：http://jsfiddle.net/LuKSB/1/ 这已经好多了，但如果按钮内的水平线是可见（白色）。我猜它会改变颜色，但它不起作用。

【问题讨论】：

你想改变文字颜色吗？还是背景颜色？因为 color 属性适用于文本颜色，而不是背景颜色。
随着更新我已经覆盖了背景颜色，现在我认为它是关于文本颜色的。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 4 的变化

Bootstrap 4 中的 navbar-toggler-icon 使用 SVG background-image。切换器图标图像有 2 个版本。一个用于浅色导航栏，一个用于深色（反向）导航栏...

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

如果您想将此图像的颜色更改为其他颜色，您可以自定义图标。例如，这里我将 RGB 值设置为粉色 (255,102,203)。注意 SVG 数据中的 stroke='rgba(255,102,203, 0.5)' 值。

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

演示 http://codeply.com/go/4FdZGlPMNV

【讨论】：

不错！任何使用十六进制颜色值的人请注意：您需要将# 编码为%23，因为# 是网址中的保留值。

【解决方案2】：

试试这个DEMO html

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

css

#nav-toggle-button{
    background-color:red;
}

【讨论】：

谢谢，现在成功了，我之前试过没有成功，可能有错字。虽然我需要按钮中的线条（图标？）为白色（请参阅我编辑的问题），但它接近我想要的。
新的 Bootstrap 4 使用 svg 因子图像作为切换器图标。例如，将其设为白色而不是灰色：.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

【解决方案3】：

添加到 Prashant 的示例中，您可以通过将 CSS 输入更改为：

#nav-toggle-button span {
    background-color: black;
}

【讨论】：

【解决方案4】：

像 @zim 我在 css 中添加这个改变描边颜色 rgba：

.navbar-light button.navbar-toggler.collapsed span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(108, 99, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

这是'collapsed'时的颜色，如果你想在汉堡包没有折叠时添加颜色，首先，在按钮中，你需要添加一个'collapsed'类，因为这个类是在第一个之后添加的clic，然后，在 css 样式文件中，您需要添加具有不同笔触颜色的相同代码，而不会像这样折叠类：

.navbar-light button.navbar-toggler span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 92, 99, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

【讨论】：