bootstrap toggle navigaion导致徽标下的行

时间:2015-12-22 20:16:26

标签: javascript jquery html css twitter-bootstrap

在我切换下图中的导航后,我需要帮助删除我的徽标“HeraldHome”下面的灰线。我已尽力而为但它仍然保持不变;我正在使用bootstrap,这是我的导航代码:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
             <button style="background-color:white;border:1px yellowgreen;" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="" style="font-size:39px;color:white;font-family:Grenadier NF;font-style:italic;padding-left:20px;">Herald<span style="font-size:34px;font-style:italic;">home</span></a>
    </div><!--navbar-header-->
    <div class="container">
        <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="ctive"><a href="" style="color:white;"><i class="fa fa-home"></i><br>Home</a></li>
            <li><a href="" style="color:white;"><i class="fa fa-delicious"></i><br>About Us</a></li>
            <li><a href="" style="color:white;"><i class="fa fa-glass"></i><br>Menu</a></li>
            <li><a href="" style="color:white;"><i class="fa fa-calendar-minus-o"></i><br>Events</a></li>
        <li><a href="" style="color:white;"><i class="fa fa-    envelope"></i><br>Contact Us</a></li>
        </ul>
        </div><!--navbar-collapse-->
    </div><!--container-->
<nav><!--navbar-->

the image

1 个答案:

答案 0 :(得分:0)

寻找:

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
     border-color: #e7e7e7;
}

请勿改变您的bootstrap.css。使用样式表通过重新寻址同一个类并重置边框来覆盖您的bootstrap css:

border-color:transparent;