самозагрузки 4 Изменение высоты Navbar вызывает NavBar элементы не будут выровнены по вертикали

Question

У меня есть загрузочный 4 Navbar так:

<nav class="navbar navbar-light bg-faded navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <!-- Toggle Button --> 
      <button type="button" class="navbar-toggler hidden-md-up" 
         data-toggle="collapse" 
         data-target="#nav-content" 
         aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-toggleable-md" id="nav-content"> 
      <ul class="nav navbar-nav pull-xs-right"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#home_page_footer"> 
         <h5 class=" nav-item clickable white-text medium-text 
             right-text"> 
             ABOUT 
         </h5> 
        </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#home_page_footer"> 
         <h5 class=" nav-item clickable white-text medium-text 
             right-text"> 
             BLOG 
         </h5> 
        </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="http://www.w3schools.com"> 
         <h5 class=" nav-item clickable white-text medium-text 
             right-text"> 
             LOGIN 
         </h5> 
        </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="http://www.w3schools.com"> 
         <h5 id=" sign-in-button" class="nav-item clickable 
            medium-text right-text"> 
          SIGN UP FREE 
         </h5> 
        </a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<nav class="navbar navbar-light bg-faded"> 

<!-- Toggle Button --> 
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content"> 
</button> 



</nav> 

я хотел бы изменить высоту панели навигации, но когда я делаю, то ссылки больше не центрированы по вертикали.

70px

я пытался высоту строки, и Flexbox варианты, такие как

nav { 
    background-color: $brand-red; 
    height:70px; 
    display: flex; 
    align-items: center; 
} 

, который делает:

мой только CSS, используемый для весь навигатор таков:

nav { 
    background-color: #fc4747; 
    height: 70px; 
    display: flex; 
    align-items: center; } 

Как вертикально центрировать элементы навигационной панели, если навигационная панель имеет высоту 70 пикселей? По умолчанию высота навигационной панели немного меньше, примерно 50 пикселей.

Answer 1

Итак, я решил, что рассмотрю несколько вещей здесь, но сначала по вашему вопросу. Если вы просто хотите изменить высоту навигационной панели вместо добавления определенной высоты на навигацию, вы можете просто добавить дополнительное дополнение к навигационной панели, чтобы дать вам желаемую высоту, и тогда вам не придется менять кучу css на протяжении всего остальная часть навигационной панели. Таким образом, это должно дать navbar высоту 70 пикселей.

.navbar{padding:1rem} 

Вот скрипка всего я обращаюсь в этой должности в действии Fiddle Demo

В этом скрипке демо я добавил некоторые адаптивные стили для укладки NavBar ссылки на вашей ширину коллапса.

Next Если вы собираетесь установить цвет фона для навигатора, нет причин использовать класс bg-faded для навигации, так как это дает вам цвет фона для навигатора, поэтому вы можете удалить этот класс из своего навигатора.

Затем я вижу, что в ваших классах для ваших навигационных ссылок есть класс white-text. Если вам нужен белый текст для вашего навигатора, вы можете просто использовать класс navbar-dark, и это даст вам более легкий текст для навигационной панели вместо использования navbar-light. Просто подумал, что я это укажу.

Next В bootstrap 4 нет класса navbar-header, так что это необязательно, если вы не планируете индивидуальный стиль. А кнопка navbar-toggler отличается в загрузчике 4 есть нет icon-bar не охватывает они просто использовать HTML код для этого сейчас ☰

Примечания: Адресация огромной моего любимой мозоли у вас есть H5 тегов в навигационной панели. Не знаю, почему это так, но я вижу, что люди делают это много. Предполагается, что теги H используются в порядке от h1 до h6 и должны быть непосредственно связаны со страницей, на которой вы находитесь, а не для всего сайта. Если у вас есть веская причина для этой практики, то обязательно сохраните их там, но я не уверен, почему я вижу, что люди все это время делают. Для меня это плохая практика, и я решил бы это сделать.