導航欄中的垂直中心下拉菜單使用引導

Question

這是我迄今爲止，包括導航鏈接..問題是「畫廊（最後一個鏈接）」不與其他鏈接對齊。

<nav class="navbar justify-content-center navbar-expand-lg"> 
<ul class="nav"> 
    <li class="nav-item"> 
    <a class="nav-link" href="home.html">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="about.html">About</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="blog.html">Blog</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="contact.html">Contact</a> 
    </li> 
    <li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Gallery 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Smiles</a></li> 
     <li><a href="#">Cry's</a></li> 
     <li><a href="#">Videos</a></li> 
     <li><a href="#">Choreography</a></li> 
     <li><a href="#"></a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 

Answer 1

您可以添加類nav-item到li，並nav-link到a。

像這樣：

<nav class="navbar justify-content-center navbar-expand-lg"> 
    <ul class="nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="home.html">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="about.html">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="blog.html">Blog</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="contact.html">Contact</a> 
     </li> 
     <li class="dropdown nav-item"> 
      <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li> 
        <a href="#">Smiles</a> 
       </li> 
       <li> 
        <a href="#">Cry's</a> 
       </li> 
       <li> 
        <a href="#">Videos</a> 
       </li> 
       <li> 
        <a href="#">Choreography</a> 
       </li> 
       <li> 
        <a href="#"></a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>