Question

我已经想出如何更改导航栏中标题的背景颜色以及链接但是其余的条形图呢？我在谈论任何链接的左右区域。我假设它在下面的代码中，但我不知道要编辑什么，因为它不清楚。注意：更改背景颜色无效。这是在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

Answer 1

有一个附带引导程序的类，名为.navbar-inverse

您可以在.navbar的地方使用该课程（只需添加，因此它看起来或多或少像navbar navbar-inverse

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

这是一个只使用股票引导的JS小提琴：Demo

作为最终建议并帮助您在bootstrap中更好地理解CSS。我建议你不要修改任何bootstrap文件，而是使用你自己的custom.css文件（把它放在bootstrap CSS后面，这样它的权重更大）并在那里做你的修改。阅读bootstrap文档，它非常简短易懂。

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

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

1 个答案: