从 bootstrap 3 导航栏的折叠中排除菜单项
Posted
技术标签:
【中文标题】从 bootstrap 3 导航栏的折叠中排除菜单项【英文标题】：Exclude menu item from the collapse of bootstrap 3 navbar 【发布时间】：2014-01-29 01:02:36 【问题描述】：这就是我所拥有的，我尝试在“品牌”内部移动我的部分并进行向右拉动，在品牌外部和折叠外部进行向左/向右拉动，同时还尝试放置它在折叠部分之前或之后。
将它添加到品牌部分时它可以工作，但它会下降到新的一行。如何保持在同一行？
<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>
【问题讨论】：
请提供一些关于您的目标的详细信息，您想要实现的目标尚不清楚（显示所需布局的简单图片会很有用） @zessx 抱歉，刚看到这个。我的导航栏中有大约 8 个菜单项。我希望无需单击导航栏上的下拉按钮即可访问一个主菜单项，因为它是一个将在移动设备上大量使用的链接。因此，我不希望用户必须通过任何额外的“点击/触摸”来访问该菜单项。下面的答案对我有用，我只需要做一些更多的格式化，这样它就不会与下拉菜单按钮重叠。 【参考方案1】：下面是一个示例，展示了如何拥有您可能想要的任何类型的“普通引导”导航栏配置。它包括一个站点标题、左对齐或右对齐的折叠和非折叠菜单项，以及静态文本。请务必阅读 cmets 以更全面地了解您可以更改的内容。享受！
小提琴：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>【讨论】：
很好的答案和非常有用的 cmets。我有一个与此相关的后续问题：您必须有一个折叠部分吗？如果我只想要通过“hidden-”和“visible-”类控制其可见性的静态项目怎么办？ @Andrew 谢谢！我对引导菜单进行了深入研究，并认为我会分享。不，您不需要任何可折叠的项目。任何带有navbar-header 类的元素都不会崩溃！
@nomis，这行得通，但你能解释一下为什么你需要下拉标题中的“margin-top：5px”吗？
现在已损坏。这是基于上述bootply.com/V46gEMiBa3 的工作示例
@MichaelPlotke 评论有效，但现在也有效。原始小提琴的一个问题是折叠菜单出现在屏幕中间而不是下方，在@MichaelPlotke 中修复了一个带有clearfix visible-xs-block 类的div。【参考方案2】：
您应该能够在 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>
【讨论】：
看起来不错。折叠后看起来有一点重叠。您知道如何解决这个问题（例如仅在折叠后才添加边距吗？）。我想我已经尝试了双头，拉左和拉右，但可能没有在一起。很好的答案！！！今晚下班回家后，我将尝试将其合并。 @Skelly，很好的答案，只是希望阅读格式不佳的 html 更容易！ @nomis 哪个部分格式不正确？我对我的代码样式非常有强迫症，并且觉得这是阅读它的最简单方法...... 如果 中有超过 1 个 则此方法无效 这似乎不再起作用了。当您展开折叠的菜单项时，它会在品牌顶部的左侧显示这些项目。【参考方案3】：这是我在 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
【讨论】：
以上是关于从 bootstrap 3 导航栏的折叠中排除菜单项的主要内容，如果未能解决你的问题，请参考以下文章
带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单
如何在折叠的导航栏中默认打开 Bootstrap 3 下拉菜单
仅在折叠位置时如何设置 Bootstrap 5 导航栏的样式？