在移动视图中，默认情况下，Bootstrap菜单不会折叠 [英] Bootstrap menu is not collapsed by default in mobile view

问题描述

我尝试使用自动折叠的twitter bootstrap 3.0实现垂直导航.

I tried to implement a vertical navigation with twitter bootstrap 3.0 that collapses automatically.

基础工作正常(窗口大小小=应该位于顶部的菜单)，但是问题是，如果我在引导程序中使用默认的导航栏功能，它不会像原来那样折叠.

The basics work (window size small = menu at the top like it should be), but the problem is that it is not collapsed as it is if I use the default navbar features in bootstrap.

<div class="container-fluid">

        <div class="row">
            <div class="navbar-brand">
                <a href="<g:createLink uri="/" absolute="true" />">BABSI</a>
            </div>
            <button type="button" class="btn navbar-btn" data-toggle="collapse"
                    data-target="#sidebar">TOOGLE

                    Toggle navigation
                    <span class="icon-bar"></span> <span class="icon-bar"></span> 
                    <span class="icon-bar"></span>
                </button>
        </div>
        <div class="row">
            <header id="sidebar" class="col-md-2 collapse">

                <div class="row">

                                    <!-- generates ul structure -->
                    <nav:primary class="nav navbar-inverse nav-stacked" />
                </div>
            </header>
            <section id="content" class="col-md-10">
                <div class="row"></div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <g:layoutTitle />
                    </div>
                    <div class="panel-body">
                        <g:layoutBody />
                    </div>
                </div>
            </section>
        </div>
    </div>

推荐答案

您的导航栏中需要 .navbar-collapse 类，因为该类被设置为在给定的断点处折叠.

You need the .navbar-collapse class in your nav since that's the one that is set up to collapse at the given breakpoint.

我对您的标记进行了一些更改以适应这种情况，还添加了一个 .navbar 容器，以便您可以轻松使用按钮上的 .navbar-toggle 类:

I made some changes in your markup to accommodate that and also added a .navbar container so you can easily use the .navbar-toggle class on the button:

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-brand"> 
            <a href="#">BABSI</a>
        </div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse"> 
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="row">
        <header id="sidebar" class="col-md-2">
            <div class="collapse navbar-collapse">
                <!-- generates ul structure -->
                <nav:primary class="nav navbar-inverse nav-stacked" />
            </div>
        </header>
        <section id="content" class="col-md-10">
            <div class="row"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <g:layoutTitle />
                </div>
                <div class="panel-body">
                    <g:layoutBody />
                </div>
            </div>
        </section>
    </div>
</div>

要删除不需要的样式，并且由于您未使用默认的导航栏折叠结构，因此需要将其添加到CSS

To remove unwanted styles and since you're not using the default navbar-collapse structure you need to add this to your CSS

//remove background and border from navbar
.navbar-default{
    background: none;
    border: 0;
}
.navbar-collapse{
    padding: 0;
}

//override width:auto of navbar-collapse
@media (min-width:768px) {
    .navbar-collapse {
        width: 100%;
    }
}

这是一个 演示小提琴

Here's a demo fiddle with the changes

这篇关于在移动视图中，默认情况下，Bootstrap菜单不会折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！