twitter-bootstrap 自定义导航栏折叠按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36275630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customize Navbar Collapse button
提问by nethken
How can i change the color of the collapse button there? and the white lines like the divider. here is the picture. Can someone help me? im new to css,bootstrap and html so please help me. or give me some ideas.
如何更改折叠按钮的颜色？和像分隔线一样的白线。这是图片。有人能帮我吗？我是 css、bootstrap 和 html 的新手，所以请帮助我。或者给我一些想法。
Here is my code.
这是我的代码。
<nav class ="navbar navbar-default" role= "navigation">
<div class = "container">
<div class ="navbar-header">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Students</a></li>
<li class="nav-divider"></li>
<li><a href="#">Faculty</a></li>
<li class="nav-divider"></li>
<li><a href="#">About us</a></li>
<li class="nav-divider"></li>
<li><a href="#">Contact us</a></li>
<li class="nav-divider"></li>
</ul>
</div>
</div>
</nav>
Here is my css.
这是我的 css。
#fot{ position:fixed;
bottom:0;
}
.navbar-default{
background-color:rgb(193,57,45);
}
.navbar .nav > li > a{
color:#ffe6e6;
}
.navbar .nav > li > a:hover{
color:#000000;
}
.navbar .nav .active > a{
background-color:rgb(193,57,45);
color:#000000;
}
.navbar .nav .active > a:hover{
background:none;
color:#fff;
}
.nav .nav-divider{
height: 50px;
margin: 0 10px;
border-right: 1px solid #a92419;
border-left: 1px solid #c1392d;
}
@media(max-width: 768px)
{.nav .nav-divider{
height: 1px;
margin: 0 10px;
background-color:#a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;
}
回答by divy3993
I guess this is what you are looking for:
我想这就是你要找的：
.icon-bar
{
background:green !important; /*Whatever colour you want for icon lines*/
}
.navbar-toggle
{
background:yellow !important; /*Whatever colour you want for background */
}
In the CSS
!importantforces to apply property aside it over actual properties of Bootstrap CSS.
在 CSS 中，
!important强制将属性应用到 Bootstrap CSS 的实际属性之上。
Update:In your CSS ADD Following code:
更新：在您的 CSS ADD 以下代码中：
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: darkblue; /* Whatever Colour you want */
}
回答by Gaurav Aggarwal
Yes ofcourse...just define some css on button class like this
是的，当然……只需在按钮类上定义一些 css 就可以了
CSS
CSS
button.navbar-toggle{
background:none;
border:none;
color:#000;
// and so on according to what style u want...
}
button.navbar-toggle span{
background:#000;/*change accordingly*/
// these span are for white line you can edit the lines in this css
}
