CSS：如何更改引导导航栏背景颜色答案

【问题标题】：CSS: How can I change bootstrap navigation bar background colorCSS：如何更改引导导航栏背景颜色
【发布时间】：2015-05-27 23:12:35
【问题描述】：

我正在使用 R 和 Shiny 创建一个明显使用引导 CSS 的网页。我完全没有使用 bootstrap 的经验，但是几年前使用过 css。

我现在有这样的结构：

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

我想要一个不同颜色的完整导航栏。如何访问这个 div 容器“navbar navbar-static-top”？！我不知道如何引用中间有空格的 CSS 代码...

【问题讨论】：

标签： html css r twitter-bootstrap shiny

【解决方案1】：

您所指的空间用于将多个类分配给一个元素。您可以通过使用任一类或两者来选择它。

.navbar {
}

.navbar-static-top {
}

.navbar,
navbar-static-top {
}

根据所需的特异性选择导航栏的所有可接受的方式。请记住，您的 CSS 必须出现在引导 CSS 之后才能覆盖引导样式。

使用 Sass 或 Less 并将引导程序类扩展到您自己的类是一种更好的做法，但目前这可能有点超出您的知识范围。

【讨论】：

【解决方案2】：

只需添加一个自定义类，例如navbar-custom 并将更改应用到自定义类，而不是修改默认类。像这样的：

HTML：

<div class="navbar navbar-custom navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

CSS：

.navbar-custom    {
    background-color: red;
    --other custom properties--
    --other custom properties--
}

【讨论】：