Question

这是我到目前为止所拥有的，包括导航链接..问题是＆＃34;图库（最后一个链接）＆＃34;没有与其他链接对齐。

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

使用Bootstrap在导航栏中垂直居中下拉列表

1 个答案: