html - Bootstrap 菜单中的奇怪边框

Question

我用 bootstrap 3 创建了一个导航栏。但问题是我的菜单中出现了一个奇怪的边框，并且菜单项没有占据导航栏的整个高度。

这是代码:

 <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="/" title="www.site.com">
                <img src="/img/logo.png" alt="site.com"/>

            </a>
            <div class="navbar navbar-collapse collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                </ul> <!-- end nav-->
                <ul class="nav navbar-nav pull-right">
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="">NL</a></li>
                            <li><a href="">IL</a></li>
                            <li><a href="">ENG</a></li>
                        </ul>
                    </li>
                </ul> <!-- end nav menu right -->
            </div> <!-- end nav-collapse -->

        </div> <!-- end container -->
    </div> <!-- end navbar -->

我在这里添加了一个示例:http://jsfiddle.net/yn9C6/

这条线从哪里来？

Answer 1

在您的 CSS 中添加以下样式。它将覆盖默认的 Bootstrap 样式，这样您就不会获得额外的填充和不必要的边框。

 .navbar-default .navbar-collapse, .navbar-default .navbar-form
 {
  border-color:transparent !important;
 }
.navbar
{
  margin-bottom:0px !important;
}