引導4拆分導航欄 - 響應下拉下不在

我有一個分離下拉菜單。在HTML我感興趣的特定部分是這樣的：引導4拆分導航欄 - 響應下拉下不在

  <li class="nav-item"> 
      <div class="btn-group"> 
       <a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">Blog</a> 
       <a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <span class="sr-only">Toggle Dropdown for Blog Links</span> 
       </a> 
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog"> 
         <div class="dropdown-header">Categories | <a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div> 
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>  
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a> 
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a> 
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a> 
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a> 
         <a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>    
       </div> 
      </div> 
      </li>

和整個導航欄看起來是這樣的：

<nav class="navbar navbar-toggleable-sm fixed-top"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <i class="fa fa-bars fa-lg" aria-hidden="true"></i> 
    </button> 
    <a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down"> BBA(Dist.), JD</small></a> 
    <div class="navbar-collapse collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#law">Law</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#technology">Technology</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#media">Media</a> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a> 
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more"> 
      <a class="dropdown-item" href="#miscinfo">More About Me</a> 
      <div class="dropdown-divider"></div> 
      <div class="dropdown-header"><em>New Tab/Window</em></div> 
      <a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">Curriculum Vitae</a> 
      <a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">Resources for Lawyers</a> 
     </div> 
     </li> 
     <li class="nav-item"> 
     <div class="btn-group"> 
      <a href="http://www.bhastings.com/blog" target="_blank" class="nav-link">Blog</a> 
      <a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="sr-only">Toggle Dropdown for Blog Links</span> 
      </a> 
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog"> 
        <div class="dropdown-header">Categories | <a href="http://bhastings.com/blog" target="_blank" style="color: #bc5b16;">Blog Main</a></div> 
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>  
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a> 
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a> 
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a> 
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a> 
        <a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>    
      </div> 
     </div> 
     </li> 
     <li class="nav-item btn btn-danger btn-sm"> 
     <a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-B-b-a-dist-j-d.shtml" target="_blank">Get in Touch<span class="sr-only"></span></a> 
     </li> 
    </ul> 
    </div> 
</nav>

的結果是這樣的小屏幕：

在導航欄中有一個拆分鏈接是有點不好意思，但儘管如此，我想知道是否有人知道一種方法讓下拉菜單「排隊」彈出，以便它看起來更像「更多「下拉菜單：

？

提前致謝！ :)

來源

2017-04-16 NotAnAmbiTurner

我想這不是一個很乾淨的答案，但我增加了一些保證金，它做的工作。但不能等待看到更好的解決方案。

@media (max-width: 992px) { 
.dropdown-menu { 
       margin:35px 0 0 -150px; 
}}

來源

2017-10-24 09:41:25 eschol

引導4拆分導航欄 - 響應下拉下不在

回答

相關問題