css - Bootstrap 3 导航栏品牌和导航栏结尾之间的空间

Question

我在使用 Bootstrap 3 时遇到问题。我不知道为什么，但在移动屏幕中，导航栏品牌和导航栏结尾之间有空格。我想，这是因为导航栏字形不适合我的导航栏。我该如何解决这个问题？我只需要删除那个空白空间...

桌面版:

移动版:

HTML:

    <header class="top" role="header">
        <div class="container">

            <a href="../aplikacija/app.html" class="navbar-brand pull-left">
                    Brand
            </a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-align-justify"></span>
            </button>

            <nav class="navbar-collapse collapse" role="navigation">
                <ul class="navbar-nav nav">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                </ul>
            </nav>

        </div>
    </header>

CSS:

div.container {
    background-color: #474747;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
}

a.navbar-brand {
    text-shadow: none;
    background-color: #ccc;
    color: #474747;
    margin-left: 0px;
}

ul.navbar-nav li a{
    text-shadow: none;
    color: #ccc;
}

ul.navbar-nav li a:hover {
    background-color: #373737;
    color: #ccc
}

button.navbar-toggle {
    color: #ffffff;
}

span.glyphicon {
    color: #009B9B;
}

Answer 1

您可以通过从 .navbar-toggle 中删除 margin-bottom 来删除此空间:

button.navbar-toggle {
    color: #ffffff;
    margin-bottom: 0px !important;
}

!important 是可选的，我现在不能告诉你是否需要这个，只是测试一下。