我正在尝试创建一个导航栏，它的右边部分供用户登录。我不知道为什么折叠不能正常工作。根据屏幕大小，我的左边部分和右边部分会彼此重叠，而不是折叠。下面是代码：

<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中检查它是否“正在工作”