如何在引导导航栏中设置非文本或锚元素的样式答案

【问题标题】：How to style non text or anchor elements in the bootstrap navbar如何在引导导航栏中设置非文本或锚元素的样式
【发布时间】：2013-07-25 23:06:18
【问题描述】：

我已经想出了如何更改诸如导航栏中的标题以及链接之类的内容的背景颜色，但是栏的其余部分呢？我说的是任何链接的左右区域。我假设它在下面的代码中，但我不知道要编辑什么，因为它不清楚。注意：更改背景颜色无效。这是在 bootstrap.css 中。颜色当前为黑色。

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #8900ff;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

我的 style.css 中的以下代码已经为链接的背景颜色着色：

.navbar .navbar-inner .container .nav-collapse > ul > li > a {
    background-color: #E89800;
}

已解决：我所要做的就是像这样摆脱背景图像：

.navbar .navbar-inner {

    background-color: #e89800;
    background-image: none;
  }

它将导航栏的背景图像设置为无，我可以更改导航栏其余部分的background-color。

找到回复：Change background color in navbar fixed menu bar Bootstrap

【问题讨论】：

标签： css twitter-bootstrap colors navbar

【解决方案1】：

bootstrap 附带一个类，称为.navbar-inverse

你可以在你有.navbar的地方使用那个类（只需添加它，它看起来或多或少像navbar navbar-inverse

这会将白色反转为黑色，您也可以轻松更改目标。

这是一个仅使用 stock bootstrap 的 JS fiddle：Demo

作为最后的建议，并帮助您更好地理解引导程序中的 CSS。我建议您不要修改任何引导程序文件，而是使用您自己的 custom.css 文件（将其放在引导程序 CSS 之后，使其权重更大）并在那里进行修改。阅读引导文档，它非常简短易懂。

您可以在此处找到此信息的来源：http://twitter.github.io/bootstrap/components.html#navbar，只需查找导航栏文档的“反向变化”部分，您就可以开始使用了。还值得注意的是，您可以反转更多内容，例如带有 btn-inverse 的按钮，因此请多阅读文档，以便您可以使用引导程序进行更好、更简单的编程。

【讨论】：