Question

从我看到的是切换导航按钮的代码：

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

但没有任何改变。我尝试添加！重要，但没有成功，我不知道还有什么可以尝试。有人知道吗？

编辑：这是Prashant123提出的解决方案的小提琴（对不起，没有足够的声誉来表达你的答案！）：http://jsfiddle.net/LuKSB/1/它已经好了，但如果按钮内的水平线条会更好会是可见的（白色）。我想这会改变颜色，但它不起作用。

Answer 1

Bootstrap 4的更改

Bootstrap 4中的navbar-toggler-icon使用SVG background-image。有两个版本的toggler图标图像。一个用于轻型导航栏，一个用于暗（反向）导航栏...

// 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://www.codeply.com/go/4FdZGlPMNV

Answer 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; }

Answer 3

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

来专门定位span的颜色

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

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

3 个答案: