<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand h1" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item" style="margin-top: 10px"> <a class="nav-link h5" href="#">Link 1</a> </li> <!-- Dropdown --> <li class="nav-item dropdown" style="margin-top: 10px"> <a class="nav-link dropdown-toggle h5" href="#" id="navbardrop" data-toggle="dropdown">二级下拉菜单 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item dropdown" style="margin-top: 10px"> <a class="nav-link dropdown-toggle h5" href="#" data-toggle="dropdown">三级下拉菜单 </a> <div class="dropdown-menu"> <span style="margin-left: 15px; font-weight: bold;">二级菜单1 <a class="dropdown-item" href="/About" style="font-size: small">三级菜单1</a> <a class="dropdown-item" href="/Contact" style="font-size: small">三级菜单2</a> <a class="dropdown-item" href="/About" style="font-size: small">三级菜单3</a> </span> <span style="margin-left: 15px; font-weight: bold;">二级菜单2 <a class="dropdown-item" href="/About" style="font-size: small">三级菜单4</a> <a class="dropdown-item" href="/Contact" style="font-size: small">三级菜单5</a> <a class="dropdown-item" href="/About" style="font-size: small">三级菜单6</a> </span> </div> </li> </ul> </nav>
参考:https://www.runoob.com/bootstrap4/bootstrap4-navs.html