从引导3导航栏的折叠中排除菜单项
这就是我所拥有的，我尝试过在“品牌”里面移动我的部分，在品牌之外，在品牌之外做一个右拉，做一个左/右，同时也试图把它放在之前或之后崩溃部分。
将其添加到品牌部分时，它会起作用，但是会下降到新的一行。 我如何保持在同一行？
<body> <header> <nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">@Html.ActionLink("Manager", "Index", "Player")</div> </div> <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> <ul class="nav navbar-nav"> @* <li class="active">@Html.ActionLink("Home", "Index", "Player")</li> <li class="active">@Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a> <ul class="dropdown-menu"> <li>@Html.ActionLink("Change Password", "ManagePassword", "Account")</li> <li>@Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li> <li>@Html.ActionLink("Log Off", "LogOff", "Account")</li> </ul> </li> </ul> </div> <div> <!-- I don't want it apart of the collapsible portion --> <div class="navbar-right"> <ul class="nav navbar-nav"> <li class="active">@Html.ActionLink("Match", "Index", "Match")</li> </ul> </div> </div> </div> </nav> </header> 下面是一个例子，显示如何拥有任何一种“香草bootstrap”NAVBARconfiguration你可能想要的。 它包含网站标题，左侧或右侧alignment的折叠和非折叠菜单项以及静态文本。 请务必阅读注释以更全面地了解您可以更改的内容。 请享用！
小提琴： http : //jsfiddle.net/nomis/n9KtL/1/
像正常一样摆弄clearfix和左侧的扩展选项： http : //jsfiddle.net/jgoemat/u1j8o0n3/1/
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Title --> <div class="navbar-header pull-left"> <a href="/" class="navbar-brand">GNOMIS</a> </div> <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> <div class="navbar-header pull-right"> <ul class="nav pull-left"> <!-- This works well for static text, like a username --> <li class="navbar-text pull-left">User Name</li> <!-- Add any additional bootstrap header items. This is a drop-down from an icon --> <li class="dropdown pull-right"> <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="/users/id" title="Profile">Profile</a> </li> <li> <a href="/logout" title="Logout">Logout </a> </li> </ul> </li> </ul> <!-- Required bootstrap placeholder for the collapsed menu --> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <!-- The Collapsing items navbar-left or navbar-right --> <div class="collapse navbar-collapse navbar-left"> <!-- pull-right keeps the drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/news">News</a> </li> <li><a href="/Shop">Shop</a> </li> </ul> </div> <!-- Additional navbar items --> <div class="collapse navbar-collapse navbar-right"> <!-- pull-right keeps the drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/locator">Locator</a> </li> <li><a href="/extras">Extras</a> </li> </ul> </div> </div> </nav>
您应该可以在两个nav-header使用pull-left和pull-right以防止链接崩溃。
请参阅： http ： //bootply.com/104747
<nav class="navbar navbar-default navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> <div class="navbar-brand">Brand</div> </div> <!-- I don't want it apart of the collapsible portion --> <div class="navbar-header pull-right"> <ul class="nav navbar-nav pull-left"> <li class="active"><a href="">No Collapse</a> </li> </ul> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a> <ul class="dropdown-menu"> <li>Change Password</li> <li>Update Profile Info</li> <li>Log Off</li> </ul> </li> </ul> </div> </div> </nav>
这里是我在Jade中的其他答案，只是为了好玩:)。 请参阅其他答案了解更多信息。
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own nav(class="navbar navbar-default navbar-fixed-top", role="navigation") .container //- Title .navbar-header.pull-left a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS //- 'Sticky' (non-collapsing) right-side menu item(s) .navbar-header.pull-right ul.nav.pull-left //- This works well for static text, maybe some initials li.navbar-text.pull-left User Name //- User Icon drop-down menu li.dropdown.pull-right a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;") span.glyphicon.glyphicon-user b.caret ul.dropdown-menu li a(href="/users/id", title="Profile") | Profile li a(href="/logout", title="Logout") | Logout //- Required bootstrap placeholder for the collapsed menu button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') span.sr-only Toggle navigation span.icon-bar span.icon-bar span.icon-bar //- The Collapsing items navbar-left or navbar-right .collapse.navbar-collapse.navbar-left //- pull-right keeps the drop-down in line ul.nav.navbar-nav.pull-right li a(href="/news") News li a(href="/shop") Shop //- Additional navbar items .collapse.navbar-collapse.navbar-right //- pull-right keeps the drop-down in line ul.nav.navbar-nav.pull-right li a(href="/locator") Locator li a(href="/extras") Extras
