twitter-bootstrap 如何更改导航丸和导航栏的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26184868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the style of nav-pills and navbar?
提问by user2953607
I am developing the frontend of a Website and I'm rather new to Ruby and Rails, css and bootstrap. Following the documentation, I have a very nice navbar at the top of my page tailored to my needs by changing options in the css file.
我正在开发一个网站的前端，我对 Ruby 和 Rails、CSS 和引导程序还很陌生。按照文档，我的页面顶部有一个非常漂亮的导航栏，通过更改 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;
}
I also need a footer with navigations options, this time with the lielements in a different style from the navbar at the top of the page. I tried using nav-pills but do not seem to be able to modifiy the lielements, they follow the navbar style. I only seem to alter anything when I throw in extra !importantstatements.
我还需要一个带有导航选项的页脚，这次使用与页面顶部导航栏不同样式的li元素。我尝试使用导航丸，但似乎无法修改li元素，它们遵循导航栏样式。当我加入额外的!important语句时，我似乎只会改变任何东西。
.nav-pills > li > a {
color: #ffffff;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.8em ;
padding: 1px 1px 1px ;
}
My specific question is what is the hierarchical dependency of nav, navbarand nav-pills, so that I can change the style of each of them separately? Does anybody have a pointer? What is the role of !important? It overwrites but why would I need it if I'm specifying nav-pillsin my css file?
我的具体问题是nav、navbar和nav-pills的层次依赖性是什么，以便我可以分别更改它们每个的样式？有人有指针吗？!important的作用是什么？它会覆盖，但如果我在我的 css 文件中指定nav-pills，我为什么需要它？
Also is it "best practice" to use a navbaralso as a footer? In the documentation I read, it seems to indicate that is mostly used in the header.
将导航栏也用作页脚也是“最佳实践”吗？在我阅读的文档中，似乎表明主要用于标题中。
Any pointers will be much appreciated!
任何指针将不胜感激！
采纳答案by Bojan Petkovski
You can make it like this so you don't have to use !important to override the css style
你可以这样做，这样你就不必使用 !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*/
}
The style you want the classes to inherit in the footer you leave them as they are :)
您希望类在页脚中继承的样式将它们保留原样:)
And yes you can use navbar in footer :)
是的，您可以在页脚中使用导航栏:)
回答by arinh
My first recommendation would be to check out SASS for restyling bootstrap as it provides many easy alternatives to changing colors, fonts, etc.
我的第一个建议是查看 SASS 以重新设计引导程序，因为它提供了许多简单的替代方法来更改颜色、字体等。
However to answer your question you should use this hierarchy:
但是，要回答您的问题，您应该使用以下层次结构：
.navbar .nav-pills > li > a
Here is a great article on understanding !important CSS declaration
这是一篇关于理解 !important CSS 声明的好文章
(http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/)
（http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/）
When creating a footer my usual practice is to create a background div/footer > container > then columns > content such as horizontal ul list etc.
创建页脚时，我通常的做法是创建背景 div/footer > 容器 > 然后是列 > 内容，例如水平 ul 列表等。
