如何更改 nav-pills 和 navbar 的样式？答案

【问题标题】：How to change the style of nav-pills and navbar?如何更改 nav-pills 和 navbar 的样式？
【发布时间】：2014-11-28 20:40:35
【问题描述】：

我正在开发网站的前端，而且我对 Ruby 和 Rails、css 和 bootstrap 还是很陌生。根据文档，我在页面顶部有一个非常漂亮的导航栏，通过更改 css 文件中的选项来满足我的需求。

.navbar {
  background-color: #3a2665;
  color: #ffffff !important;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff !important;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

我还需要一个带有导航选项的页脚，这次 li 元素的样式与页面顶部的导航栏不同。我尝试使用 nav-pills 但似乎无法修改 li 元素，它们遵循导航栏样式。当我添加额外的 !important 语句时，我似乎只会更改任何内容。

.nav-pills > li > a {
  color: #ffffff;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.8em ;
  padding: 1px 1px 1px ;
}

我的具体问题是nav、navbar和nav-pills的层次依赖是什么，这样我就可以改变风格他们每个人分开？有人有指针吗？ !important 的作用是什么？它会覆盖，但如果我在我的 css 文件中指定 nav-pills，我为什么需要它？

将 导航栏 也用作页脚是否也是“最佳做法”？在我阅读的文档中，似乎表明它主要用于标题中。

任何指针将不胜感激！

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap navbar

【解决方案1】：

你可以这样做，这样你就不必使用 !important 来覆盖 css 样式

.navbar {
  background-color: #3a2665;
  color: #ffffff;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

footer .navbar{
    color: #ff0000; /* TO change the color in the footer*/
}
footer .navbar .nav > li > a {
  color: #ff0000; /* TO change the color in the footer*/
}

您希望类在页脚中继承的样式保持原样:)

是的，您可以在页脚中使用导航栏:)

【讨论】：

【解决方案2】：

我的第一个建议是查看 SASS 以重新设置引导程序样式，因为它提供了许多简单的替代方法来更改颜色、字体等。

但是要回答您的问题，您应该使用此层次结构：

.navbar .nav-pills > li > a

这是一篇关于理解 !important CSS 声明的精彩文章

(http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/)

创建页脚时，我通常的做法是创建背景 div/footer > 容器 > 然后是列 > 内容，例如水平 ul 列表等。

【讨论】：

了解 !important 的好文章。