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

Question

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

桌面：

Mobile/Collapsed:

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

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

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

有没有办法添加 to/modify 变量文件，以便无论使用哪个 Bootswatch 主题，都可以应用默认样式，and/or 甚至默认 Bootstrap 主题？

Answer 1

如果我没有正确理解你的问题：

我无法将锚点 () 标记添加到始终显示的链接（即 'Show Link 1'）

尝试在<li>

之前添加锚标签

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

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

您可以做两件事：

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

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

Style custom links (outside of navbar-nav) in navbar like others Bootstrap Bootswatch

html

css

navbar

twitter-bootstrap

bootswatch