在导航栏中设置自定义链接（navbar-nav之外），就像其他Bootstrap Bootswatch一样

Question

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

桌面：

移动/折叠：

继续展示的内容是通过添加＆＃39; navbar＆＃39;标题＆＃39;来完成的。到div并向右拉，因此默认样式不会应用于其中的链接。

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

• 我无法将锚（）标记添加到始终显示的链接（即＆＃39;显示链接1＆＃39;）

• 如果我点击用户名下拉列表并单击并按住其中一个菜单链接（即个人资料），则颜色会发生变化：

但是，它看起来应该类似于默认下拉列表（左侧）：

<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（）标记添加到始终显示的链接中 （即＆＃39;显示链接1＆＃39;）

尝试在<li>

之前添加锚标记

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

• 如果我点击“用户名”下拉列表并单击并按住其中一个 菜单链接（即配置文件），然后颜色更改：

您可以做两件事：

您可以在html中向ul添加额外的类，然后添加样式以覆盖默认的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