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