Bootstrap 3导航栏品牌和导航栏结束之间的空间

Question

我对Bootstrap 3有一个问题。我不知道为什么，但在移动屏幕上，navbar-brand和导航栏之间有空格结束。我猜，这是因为导航栏glyphicon不适合我的导航栏。我该如何解决这个问题？我只需要删除那个空白区域......

桌面版尺寸：

移动尺寸版本：

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

您可以从margin-bottom

中删除.navbar-toggle来删除此空格

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

!important是可选的，如果您需要，我现在无法告诉您，只需测试一下。