- 首页
- 前端开发
- 从 bootstrap 3 导航栏的折叠中排除菜单项
从 bootstrap 3 导航栏的折叠中排除菜单项
[英] Exclude menu item from the collapse of bootstrap 3 navbar
本文介绍了从 bootstrap 3 导航栏的折叠中排除菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我所拥有的，我尝试在品牌"内部移动我的部分并向右拉，在品牌外部和折叠外部并向左/向右拉，同时还尝试放置它在折叠部分之前或之后.
将它添加到品牌部分时它可以工作，但它会下降到一个新行.我如何将它保持在同一行?
<标题><nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">@Html.ActionLink("Manager", "Index", "播放器")
<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="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">个人资料<b class="caret"></b></a><ul class="下拉菜单"><li>@Html.ActionLink("更改密码", "管理密码", "帐户")</li><li>@Html.ActionLink("更新配置文件信息", "UpdateProfile", "帐户")</li><li>@Html.ActionLink("Log Off", "LogOff", "Account")</li>
<div><!-- 我不希望它与可折叠部分分开--><div class="navbar-right"><ul class="nav navbar-nav"><li class="active">@Html.ActionLink("Match", "Index", "Match")</li>
</nav></标题>
解决方案
下面是一个示例，展示了如何拥有您可能需要的几乎任何类型的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="容器"><!-- 标题--><div class="navbar-header pull-left"><a href="/" class="navbar-brand">GNOMIS</a>
<!-- 'Sticky'(非折叠)右侧菜单项--><div class="navbar-header pull-right"><ul class="nav pull-left"><!-- 这适用于静态文本，例如用户名 --><li class="navbar-text pull-left">用户名</li><!-- 添加任何额外的引导程序头项.这是一个图标的下拉菜单 --><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="下拉菜单"><li><a href="/users/id" title="个人资料">个人资料</a><li><a href="/logout" title="退出">退出 </a><!-- 折叠菜单所需的引导程序占位符 --><button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></跨度>
<!-- 折叠项 navbar-left 或 navbar-right --><div class="collapse navbar-collapse navbar-left"><!-- pull-right 使下拉菜单保持一致--><ul class="nav navbar-nav pull-right"><li><a href="/news">新闻</a><li><a href="/Shop">Shop</a>
<!-- 其他导航栏项目--><div class="collapse navbar-collapse navbar-right"><!-- pull-right 使下拉菜单保持一致--><ul class="nav navbar-nav pull-right"><li><a href="/locator">Locator</a><li><a href="/extras">Extras</a>
</nav>
Here's what I have, I've tried moving around my section inside the "brand" and do a pull-right, outside the brand and outside the collapse and do a pull-left/right, while also trying to place it before or after the collapse section.
When adding it to the brand section it works, but it goes down to a new line. How do I keep it on the same line?
<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>
解决方案
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
Fiddle with clearfix and expanded options on left side like normal: 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>
这篇关于从 bootstrap 3 导航栏的折叠中排除菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
