我使用bootstrap,我在标题中显示语言选择。 现在,当我减小宽度时,bootstrap将把我的元素放在移动选择中。 (s。截图)
大部分时间都是好事,但在某些情况下我希望选项保持可见。移动菜单左侧的Fest选项。
<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="foo">French</a></li>
<li><a href="foo">English</a></li>
</ul>
</li>
</ul>
</div>
如果我做了两个小组,比如
<ul class="nav navbar-nav navbar-right">
.. Non collapsable items
</ul>
<div class="collapse navbar-collapse" id="navbar-main">
.. collapsable items
</div>
然后不可折叠的项目放在菜单下方而不是左侧。
答案 0 :(得分:2)
你走了。听起来你想要从boostrap移动视图中排除一些菜单项。我有类似的问题,并在这里回答。
答案 1 :(得分:1)
转贴*
下面是一个示例,展示了如何获得您想要的任何类型的“vanilla bootstrap”NAVBAR配置。它包括一个站点标题,左右对齐的折叠和非折叠菜单项以及静态文本。请务必阅读评论,以便更全面地了解您可以改变的内容。享受!
小提琴:http://jsfiddle.net/nomis/n9KtL/1/
<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 :(得分:0)
为了从Bootstrap的自动折叠功能中删除菜单部分,您需要将其移出。如下所示:
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="foo">French</a></li>
<li><a href="foo">English</a></li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
<ul class="nav navbar-nav navbar-right">
<a href="#">Link</a>
<a href="#">Another Link</a>
</ul>
</div>
</div>
&#34;崩溃&#34; div将崩溃到移动菜单中。任何不存在的东西,如大多数菜单中的导航栏品牌链接,都不会。
希望有所帮助。