我正在尝试在 Bootstrap 中创建自定义导航栏。
我想实现四件事:
导航链接右对齐
导航栏展开时导航链接的文本居中对齐
导航栏折叠时导航链接的文本右对齐
(这是困难的部分)在导航栏折叠时显示但在展开时不显示的附加导航链接。
<div class="navbar">
<div class="navbar-inner">
<div class="ps-content">
<button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">Navigation</div>
<!-- PS RHS menu items -->
<div class="visible-tablet pull-right">
<ul class="nav">
<li class="active"><a href="#link_1">Active link</a></li>
<li class="divider-vertical"></li>
<li><a href="#link_2">Second link</a></li>
<li class="divider-vertical"></li>
<li><a href="#link_3">Third link</a></li>
</ul>
</div>
<div class="nav-collapse pull-right ">
<ul class="nav pull-right ">
<li class="active"><a href="#link_1">Actives link</a></li>
<li class="divider-vertical"></li>
<li><a href="#link_2">Second link</a></li>
<li class="divider-vertical"></li>
<li><a href="#link_3">Third link</a></li>
</ul>
</div>
</div>
</div>
</div>
jsFiddle 在这里:http://jsfiddle.net/robmc/M43fK/4/
我已经成功地实现了 1 和 2,并且我确信我缺少一些简单的 CSS 标记来实现 3,但是我对第 4 点感到困惑。我还没有在其他任何地方看到过这种尝试。有什么想法吗?
谢谢
最佳答案
对于问题 3,您可以使用 <li class="text-right">
.
对于问题 4(仅在导航栏折叠时显示的链接),有几种不同的方法。一种方法是使用 hidden-desktop hidden-tablet 类(因为您已经在使用 visible-*)
<ul class="nav hidden-desktop hidden-tablet">
<li><a href="#link_1">Collapsed link</a></li>
</ul>
Edit - Bootstrap 3 根据您希望隐藏的大小更新了三个类名:.hidden-sm
, .hidden-md
, .hidden-lg
编辑(2) - Bootstrap 4 .hidden-*
类有changed to display classes
关于css - Bootstrap : How to create additional menu items in navbar-collapse,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16809942/