ブートストラップ付きナビバーの中に縦にセンタードロップダウン

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にクラスを追加することができ

、およびaからnav-link。そのよう

：

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