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（max-width：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 class），所有下拉菜单都显示为正常下拉菜单而不是移动版本。有谁知道我怎么能解决这个问题，甚至为什么它会发生在我看到的每个例子都完美无缺的时候。

Answer 1

如果你想用bootstrap解决你的问题，你必须定义自定义的响应grid-float-breakpoint（@ grid-float-breakpoint）。为此，你必须自定义bootstrap variables.less文件。这里还有一个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">

Bootstrap 3菜单断点更改但现在菜单没有折叠

2 个答案: