-1

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

找到响应：更改导航栏固定菜单栏 Bootstrap 中的背景颜色

4

1 回答 1

0

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

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

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

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

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

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

于 2013-07-25T23:51:03.817 回答