Bootstrap 3 Пробел между navbar-brand и navbar заканчивается

Question

У меня проблема с Bootstrap 3. Я не знаю почему, но на мобильном экране есть пробел между навигационной маркой и навигационной панелью. Наверное, это из-за навигационной панели глификон не подходит для моей навигационной панели. Как я могу решить эту проблему? Мне просто нужно, чтобы удалить это пустое пространство ...

Desktop размер Версия:

версия Mobile-размер:

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 не является обязательным, я не могу сказать вам прямо сейчас, если вам это нужно, просто проверить его.