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

时间:2015-02-22 12:53:18

标签: twitter-bootstrap navbar collapse

我正在尝试创建一个带有正确部分的导航栏供用户登录。 我无法弄清楚为什么崩溃不能正常工作。 根据屏幕尺寸,我的左侧部分和右侧部分相互叠加而不是折叠。这是代码:

<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>

你可以查看它&#34;工作&#34;在此jsfiddle

1 个答案:

答案 0 :(得分:0)

添加媒体查询:

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

更多信息here