從bootstrap 3導航欄的折疊中排除菜單項
[英]Exclude menu item from the collapse of bootstrap 3 navbar
問題描述
這就是我所擁有的，我已經嘗試在“品牌”中移動我的部分並在品牌外部和折疊之外做一個向右拉動並做左/右拉，同時也嘗試在之前或之后放置它崩潰部分。
將它添加到品牌部分時，它可以正常工作，但它會歸結為新的一行。 我如何將它保持在同一條線上？
<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>
3 個解決方案
解決方案1
78 已采納 2014-04-10 04:58:04
下面的示例演示了如何使用您想要的任何類型的“vanilla bootstrap”NAVBAR配置。 它包括一個站點標題，左右對齊的折疊和非折疊菜單項以及靜態文本。 請務必閱讀評論，以便更全面地了解您可以改變的內容。 請享用！
小提琴： http ： //jsfiddle.net/nomis/n9KtL/1/
在左側像正常一樣使用clearfix和擴展選項： http ： //jsfiddle.net/jgoemat/u1j8o0n3/1/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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>
解決方案2
26 2014-01-10 10:26:29
你應該能夠在2個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>
解決方案3
3 2014-04-10 05:12:49
這是我在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
單擊菜單項后如何關閉Twitter Bootstrap 3折疊導航欄
[英]How to Close Twitter Bootstrap 3 Collapse Navbar upon Clicking a Menu Item
Bootstrap 3-是否可以不折疊導航欄，而不折疊邊欄到導航欄菜單？
[英]Bootstrap 3 - Is it possible not to collapse navbar, and collapse sidebar to navbar menu?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.