2016-03-06 2 views
0

высота на контейнере .navbar, и поскольку это меню больше не вертикально. display:inline-block не работал для меня. Должно быть решение, не предоставляющее меню дополнение для его исправления.Вертикальное выравнивание в меню начальной загрузки

Как получить вертикальное выравнивание меню в контейнер .navbar? Im использованием начальной загрузки в рамках

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">Brand</a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Login</a></li> 
     </ul> 
    </div> 
</div> 

Jsfiddle

.navbar{background-image: linear-gradient(90deg, #bed970, #54c1b5);background-size: 100% 4px;background-position: 0 0;background-repeat: no-repeat;-webkit-box-shadow: 0 0 4px #c8cacc;box-shadow: 0 0 4px #c8cacc;border: none;font-size: 14px;min-height: 70px;} 
+0

Почему 'мин-height'? Если это необходимо, отрегулируйте «высоту строки» для якорей. – CodeRomeos

ответ

0

Предполагая, что вы хотите сохранить высоту 70px Простейшим решением является изменение высоты строки в соответствии с комментарием CodeRomeos выше.

.navbar-brand, .navbar-nav li a { 
line-height: 40px; 
} 

https://jsfiddle.net/hnyadr4s/1/

0

Вопрос, кажется, что мин-высота в настоящее время устанавливается в 70px на .nav элемент

если вы добавляете следующие css

.navbar{min-height:inherit;} 

то это должно быть нормально

https://jsfiddle.net/ogvs98LL/

или добавить отступы к вершине, если вы хотите сохранить высоту

https://jsfiddle.net/pfjL9jy6/