引導3菜單斷點改變，但現在菜單不崩潰

Question

嘿，夥計，所以我努力得到這個權利。這是我的菜單代碼。我已經成功更改了菜單的斷點，但現在它不會崩潰，直到它達到原始斷點。

  <nav class="navbar navbar-default" id="navigation-top-affix"> 

       <div class="navbar-header"> 

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsemenu"> 

         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <div class="navbar-brand visible-xs-block">Menu</div> 
       </div> 

       <div class="collapse navbar-collapse" id="collapsemenu"> 

        <ul class="nav navbar-nav"> 

         <li><a href="index.php">Home</a></li> 

         <li> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Product Portfolio 
          <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 

            <li><a href="_products/allied.php">Allied products and commodities</a></li> 
            <li><a href="_products/artisan.php">Artisan and speciality bread mixes</a></li> 
            <li><a href="_products/breads.php">Breads</a></li> 
            <li><a href="_products/catering.php">Catering products</a></li> 
            <li><a href="_products/chocolate.php">Chocolate products</a></li> 
            <li><a href="_products/confectionery.php">Confectionery premixes</a></li> 
            <li><a href="_products/dairy.php">Dairy products and imitation creams</a></li> 
            <li><a href="_products/decorative.php">Decorative products</a></li> 
            <li><a href="_products/equipment.php">Equipment, hardware and smalls</a></li> 
            <li><a href="_products/essences.php">Essences and colours</a></li> 
            <li><a href="_products/fruitpie.php">Fruit pie fullings and toppings</a></li> 
            <li><a href="_products/ingredients.php">Functional ingredients</a></li> 
            <li><a href="_products/leavening.php">Leavening agents</a></li> 
            <li><a href="_products/paper.php">Paper products, foils and packaging</a></li>           
            <li><a href="_products/roll.php">Rolls premixes</a></li> 

           </ul> 
         </li> 

         <li><a href="yeast.php">Yeast</a></li> 
         <li><a href="tools.php">Tools</a></li> 
         <li><a href="principals.php">Principals</a></li> 
         <li> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Forms 
          <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 

            <li><a href="form_application.php">Credit Application Form</a></li> 
            <li><a href="form_request.php">Customer Request Form</a></li> 

           </ul> 
         </li>           

         <li><a href="http://kri53-nix1.wadns.net/~chipbake/_news">News</a></li> 
         <li><a href="http://coa.chipbake.co.za:82/" target="_blank">Product COAs</a></li> 
         <li class="last"><a href="contact.php">Contact Us</a></li> 
        </ul> 

       </div> 

      </nav> 

由於菜單太長，我製作了斷點1200px。這裏是用來覆蓋原始斷點的CSS。

@media（最大寬度：1200像素）{

.navbar-header { 
    float: none !important; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block !important; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent !important; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important; 
} 
.navbar-fixed-top { 
    top: 0 !important; 
    border-width: 0 0 1px !important; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px !important; 
} 
.navbar-nav>li { 
    float: none !important; 
} 
.navbar-nav>li>a { 
    padding-top: 10px !important; 
    padding-bottom: 10px !important; 
} 
.collapse.in{ 
    display:block !important; 
} 

}

菜單保持打開（collapse.in類）和所有的下拉菜單被顯示爲正常的下拉列表中不移動版本。有沒有人知道我可以如何解決這個問題，甚至爲什麼它會發生在每一個例子ive看起來都很好的時候。

Answer 1

如果你想用引導來解決你的問題，你必須定義你自定義的響應式網格浮點斷點（@ grid-float-breakpoint）。爲此，你必須定製引導變量。無文件。這裏是Instructions也here。其他方式你可以用Jquery some example來操縱你的導航欄。我希望它可以幫助

Answer 2

只需將#autocollapse添加到您的導航標記。看到代碼

function autocollapse() { 
 
    var navbar = $('#autocollapse'); 
 
    navbar.removeClass('collapsed'); 
 
    if(navbar.innerHeight() > 50) // check if we've got 2 lines 
 
     navbar.addClass('collapsed'); 
 
}

#autocollapse.collapsed .navbar-header { 
 
    float: none; 
 
} 
 
#autocollapse.collapsed .navbar-toggle { 
 
    display: block; 
 
} 
 
#autocollapse.collapsed .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
 
} 
 
#autocollapse.collapsed .navbar-collapse.collapse { 
 
    display: none!important; 
 
} 
 
#autocollapse.collapsed .navbar-nav { 
 
    float: none!important; 
 
    margin: 7.5px -15px; 
 
} 
 
#autocollapse.collapsed .navbar-nav>li { 
 
    float: none; 
 
} 
 
#autocollapse.collapsed .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
}

<nav id="autocollapse" class="navbar navbar-default" id="navigation-top-affix">