Bootstrap 3: Vertical Center Navigation Links, когда логотип увеличивается Высота Navbar

Я новичок в платформе bootstrap, но даже после прочтения всей документации и всех существующих вопросов StackOverflow я все еще немного застрял.

Логотип Увеличение высоты NavBar:

В моей навигационной панели я вставил логотип с высотой 50 пикселей. Это, очевидно, делает навигацию выше. Я не скорректировал CSS для этого, это просто логотип, который заставляет увеличить высоту.

Проблема:

Ссылки в навигационной панели выровнены в верхней части теперь более высокой навигационной панели.

Цель:

Я бы хотел, чтобы ссылки были вертикально центрированы на navbar, так как это будет выглядеть намного лучше.

Мое предположение заключалось в том, чтобы играть с значениями высоты строки или дополнением. Тем не менее, это привело к проблеме, которая все еще действует на мобильные браузеры (когда она переключается в меню переключения), поэтому мое расширенное меню заканчивается слишком высоким, что казалось глупым.

Любое понимание очень ценится?

Мой CSS - это загрузочный CSS-загрузочный файл по умолчанию, загруженный с последней версией 3.0.2.

Вот мой HTML:

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

Это ссылки "Link 1", "Link 2", "Link 3" и "Link 4", которые выравниваются вверху, когда я действительно хочу, чтобы они были выровнены по вертикали в центре.

Большое спасибо заранее!

Ответы

Ответ 1

добавьте это в свою таблицу стилей. высота линии должна соответствовать высоте вашего логотипа

.navbar-nav li a {
 line-height: 50px;
}

Посмотрите скрипку по адресу: http://jsfiddle.net/nD4tW/

Ответ 2

Ответ Matt - это хорошо, но просто чтобы это не распространилось на другие элементы внутри навигационной панели (например, когда вы также выпадаете), используйте

.navbar-nav > li > a {
   line-height: 50px;
}

Ответ 3

Используйте Bootstrap Customizer, чтобы создать версию Bootstrap с более высоким уровнем навигации. Значение, которое вы хотите изменить, @navbar-height в разделе Navbar.

Осмотрите свою текущую реализацию, чтобы узнать, насколько высок ваш навигатор с изображением бренда 50px и используйте эту расчетную высоту в Настройщике.

Ответ 4

Bootstrap автоматически устанавливает высоту навигационной панели на 50 пикселей. Для прокладки над и под ссылками установлено значение 15px. Я думаю, что bootstrap добавляет дополнение к вашему логотипу.

Вы можете либо удалить часть прокладки выше и ниже вашего логотипа, либо добавить дополнительные надписи над и под ссылками.

Добавление дополнительных дополнений должно выглядеть примерно так:

nav.navbar-inverse>li>a {
 padding-top: 25px;
 padding-bottom: 25px;
}

Ответ 5

Я обнаружил, что вам не обязательно нужен текст по вертикали по центру, он также хорошо выглядит в нижней части строки, только когда он наверху (или над центром?), что он выглядит неправильно. Поэтому я пошел с этим, чтобы нажимать ссылки на нижнюю часть строки:

.navbar-brand {
    min-height: 80px;
}

@media (min-width: 768px) {
    #navbar-collapse {
        position: absolute;
        bottom: 0px;
        left: 250px;
    }
}

Мой образ бренда - SVG, и я использовал height: 50px; width: auto, что делает его шириной около 216 пикселей. Он вылился из контейнера вертикально, поэтому я добавил min-height: 80px;, чтобы освободить место, а также поля загрузочного 15px. Затем я изменил настройку navbar-collapse left, пока она не посмотрела правильно.

Ответ 6

На самом деле я закончил с чем-то вроде этого, чтобы разрешить навигация.

@media (min-width: 768px) { //set this to wherever the navbar collapse executes
  .navbar-nav > li > a{
    line-height: 7em; //set this height to the height of the logo.
  }
}