Bootstrap 3 навигации выпуск элементов списка парения

Question

Я судимое этот пример:

HTML

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 
<h1>Home</h1> 

CSS

@media (min-width: 768px) { 
    .navbar .navbar-nav { 
     display: inline-block; 
     float: none; 
    } 

    .navbar .navbar-collapse { 
     text-align: center; 
    } 
} 

http://jsfiddle.net/bdd9U/3/

с этой страницы : Center content in responsive bootstrap navbar

и я хотел бы добавить эффект при наведении на Nav элементов списка следующим образом:

http://jsfiddle.net/bdd9U/560/

, но в нижней части имеют некоторую дополнительную высоту и парение эффект не может достаточно свободного места. Если мы изменим размер экрана на мобильный, мы увидим, что высота заголовка снижается примерно на 5 пикселей ниже. Как устранить эту проблему?

Answer 1

Похоже, что display: inline-block добавляет пространство после элементов навигации.

Вы можете установить фиксированную высоту для навигационной панели.

@media (min-width: 768px) { 
 
    .navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    height: 45px; /* Add */ 
 
    } 
 
}

Обновлено JSfiddle