无法弄清楚为什么我的导航栏没有正确折叠

Question

我正在尝试创建一个带有右侧部分的导航栏供用户登录。我不明白为什么折叠不能正常工作。根据屏幕尺寸，我的左侧部分和右侧部分相互重叠而不是折叠。这是代码：

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav">
            <li>
                <a href="/IgrejaVidaPlena/">Home</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Igreja<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/IgrejaVidaPlena/church/about">Sobre nós</a>
                    </li>
                    <li><a href="/IgrejaVidaPlena/church/shepherd">Pastores</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/ministry">Ministérios</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/mission">Missões</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/cult">Cultos</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/PrayerRequest">Pedidos de Oração</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/shepherdReflection">Palavra do pastor</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/photoAlbum">Fotos</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 0 !important">
            <li>
                <a href="/IgrejaVidaPlena/church/login">Login</a>
            </li>
        </ul>
    </div>
</div>

你可以在这个jsfiddle

中查看"working"

Answer 1

添加媒体查询：

@media (max-width: 990px) {
    ...
}

更多信息here。

无法弄清楚为什么我的导航栏没有正确折叠

Can't figure it out why my navbar isn't collapsing properly

collapse

navbar

twitter-bootstrap