Question

我正在尝试在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点我很难过。我还没有看到其他任何地方尝试过。有什么想法吗？

由于

Answer 1

对于问题3，您可以使用<li class="text-right">。

对于问题4（仅在导航栏折叠时显示的链接），有几种不同的方法。一种方法是使用隐藏桌面隐藏平板电脑类（因为你已经使用了可见 - *）

<ul class="nav hidden-desktop hidden-tablet">
  <li><a href="#link_1">Collapsed link</a></li>
</ul>

Bootply Demo

编辑 - 引导3 更新了三个类名，具体取决于您要隐藏的尺寸：.hidden-sm，.hidden-md，.hidden-lg

编辑（2） - Bootstrap 4 .hidden-*班级有changed to display classes

Bootstrap：如何在navbar-collapse中创建其他菜单项

1 个答案: