html - 像其他 Bootstrap Bootswatch 一样在导航栏中设置自定义链接(在 navbar-nav 之外)

Question

我有一个导航栏，其中一些导航栏链接始终显示，即使在折叠模式下也是如此。我正在使用 Bootswatch 的 Paper 主题:Bootswatch Paper Theme .

桌面:

移动/折叠:

继续显示的内容是通过将“navbar'header'添加到 div 并将其向右拉来完成的，因此默认样式不会应用于其中的链接。

我已经应用了一些样式，但仍然存在一些问题。

• 我无法将 anchor () 标记添加到始终显示的链接(即“显示链接 1”)

• 如果我单击“用户名”下拉菜单并单击并按住其中一个菜单链接(即个人资料)，则颜色会发生变化:

但是，它应该看起来类似于默认下拉列表(在左侧):

<div class="navbar-header navbar-right pull-right">
    <ul class="nav pull-left">
        <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 1</li>
        <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 2</li>
        <li class="dropdown pull-right">
            <a href="#" data-toggle="dropdown" id="user-dropdown" class="dropdown-toggle">
                User Name <span class="glyphicon glyphicon-user"></span>
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li class="navbar-link">
                    <a href="/users/id" title="Profile">Profile</a>
                </li>
                <li>
                    <a href="/logout" title="Logout">Logout </a>
                </li>
            </ul>
        </li>
    </ul>
    <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>

这是一个 JSFiddle:JSFiddle

---

有没有办法添加/修改变量文件，以便无论使用哪个 Bootswatch 主题和/或什至默认的 Bootstrap 主题，都可以应用默认样式？

Answer 1

如果我正确理解您的问题:

• 我无法将 anchor () 标记添加到始终显示的链接 (即“显示链接 1”)

尝试在<li>之前添加 anchor 标签

   <a href="#"><li class="navbar-text navbar-link pull-left
       navbar-always-show">Show Link 1</li></a>

• 如果我单击“用户名”下拉列表并单击并按住其中一个 菜单链接(即配置文件)，然后颜色发生变化:

你可以做两件事:

您可以向 ul 添加一个额外的类在 html 中，然后添加样式以覆盖默认的 css，或者只覆盖导航的默认样式。

HTML

<ul class="nav pull-left nav-override">

CSS

.nav-override .open > a, .nav-override .open > a:hover, .nav-override .open > a:focus {
    color: #ffffff!important;
    background-color: #0c7cd5!important;
}

或

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    color: #ffffff!important;
    background-color: #0c7cd5!important;
} 

fiddle