html - Bootstrap 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 ive。

@media(最大宽度:1200px){

.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 类)并且所有下拉菜单都显示为普通下拉菜单而不是移动版本。有谁知道我如何解决这个问题，甚至当我看过的每个示例都运行良好时为什么会发生这种情况。

Answer 1

如果你想用 bootstrap 解决你的问题，你必须定义你的自定义响应式 grid-float-breakpoint(@grid-float-breakpoint)。为此你必须自定义 bootstrap variables.less 文件。这是一个Instructions还有here .您可以使用 Jquery 操作导航栏的其他方式 some example .希望对你有帮助