引導四化導航欄高度導航欄導致項目不能垂直居中

Question

我有一個自舉4導航欄是這樣的：

<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> 

我想改變導航欄的高度，但是當我做什麼，鏈接不再是垂直居中的。

70像素

我已經試過行高，和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; } 

如果導航欄高度爲70px，如何垂直居中導航欄項目？導航欄的默認高度稍小，約爲50px。

Answer 1

所以我想我會在這裏解決一些事情，但首先關於你的問題。如果你只是想改變導航欄的高度而不是嚮導航欄添加一個特定的高度，你可以在導航欄中添加額外的填充以提供你想要的高度，然後你不必在整個過程中改變一堆CSS導航欄的其餘部分。所以這樣做應該給導航欄70px的高度。

.navbar{padding:1rem} 

這裏的一切，我在這個崗位應對行動Fiddle Demo

在這種提琴演示中，我還添加了一些響應樣式堆放在你崩潰寬度導航欄鏈接的小提琴。

Next如果您要爲導航設置背景顏色，則沒有理由將bg-faded類用於導航，因爲這只是爲導航提供了背景顏色，因此您可以從導航中刪除該類。

然後我在你的課上看到你的導航鏈接，你有一個white-text類。如果你想爲你的導航欄添加白色文字，你可以使用navbar-dark這個類，這會讓你的導航條更輕，而不是使用navbar-light。剛剛想到我會指出。

Next在引導程序4中沒有navbar-header類，因此除非您計劃在此定製樣式，否則這不是必需的。而navbar-toggler按鈕是引導4個不同的沒有icon-bar跨越他們只使用HTML代碼現在這個☰

注：解決我的一個巨大的忌諱你在你的導航欄H5標籤。不知道爲什麼這是，但我看到人們做了很多。 H標籤應該按從h1到h6的順序使用，並且應該與您所在的頁面直接相關，而不是整個站點。如果你有這個習慣的充分理由，那麼盡一切辦法讓他們在那裏，但我不知道爲什麼我看到人們總是這樣做。對我來說，這是一個不好的做法，我想我會解決這個問題。