html - 像其他人一样在导航栏中设置样式自定义链接（在导航栏导航之外） Bootstrap Bootswatch

Question

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

桌面：

移动/折叠：

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

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

• 我无法将锚 () 标记添加到始终显示的链接（即“显示链接 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

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

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

尝试在之前添加锚标记<li>

   <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;
} 

小提琴