引导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">