单击时,Bootstrap下拉按钮变为半黑?

时间:2013-02-19 04:52:23

标签: jquery html html5 twitter-bootstrap

对这个愚蠢的问题抱歉,我在导航栏中创建了一个登录按钮(navbar-inverse),但点击按钮变成了半黑。我没有自定义按钮,它是简单的红色危险按钮。我一直在寻找原因,但没有任何工作。所以请帮助我。

 <div class="navbar navbar-inverse" style="margin-bottom:0px">
            <div class="navbar-inner">
                <ul class="nav pull-right" style="margin-top:3px">
                    <li class="active span2"><a href="#">HOME</a></li>
                    <li><a href="#" class="span2">ABOUT</a></li>
                    <li><a href="#" class="span2">PRICING</a></li>
                    <li><a href="#" class="span2">CONTACT</a></li>
                    <li class="dropdown">                           
                        <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">SIGN IN</button>
                        <ul class="dropdown-menu" style="margin-right:25px;margin-top:10px;width:230px">
                            <form align="center" style="text-align:center">
                                <div class="input-prepend">
                                    <span class="add-on" style="margin-top:10px"><i class="icon-user icon-black"></i></span>
                                    <input type="text" style="width:140px;margin-top:10px"/>
                                </div>
                                <input type="text" style="width:170px"/>
                            </form>
                        </ul>                   
                    </li>
                </ul>

            </div>
        </div>

before clicking

after clicking

1 个答案:

答案 0 :(得分:2)

问题在于.navbar-inverse .nav li.dropdown.open.navbar .nav li.dropdown.open类。

请在自定义样式表中使用以下类,将background-color更改为您的选择。

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav   li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #FFFFFF;
 }
       .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color:#BD362F;
color: #555555;
 }

jsfiddle for you Jsfiddle with drop down