CSS 如何使 twitter-bootstrap 导航栏没有颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13068778/
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 make twitter-bootstrap navbar have no color
提问by caarlos0
I'm trying to reproduce a effect like basecamp navbar in my app.
我正在尝试在我的应用程序中重现像 basecamp 导航栏这样的效果。
The deal is that the navbar would have the same color as body background color, and no borders or anything, wich made the feel that 'is all the same thing'....
交易是导航栏将具有与正文背景颜色相同的颜色，并且没有边框或任何东西，这让人感觉“都是一样的东西”......
Anybody know a good way of doing this?
PS: I'm using the .lessfiles, so, I can easily edit the variables.
有人知道这样做的好方法吗？PS：我正在使用这些.less文件，因此，我可以轻松编辑变量。
Thanks in advance
提前致谢
EDIT: I forget to said, but I want the fixed-top and responsiveness behaviors of bootstrap too.. I also already using tw bootstrap in my app, so, I'll really want to use it.
编辑：我忘了说，但我也想要 bootstrap 的固定顶部和响应行为。我也已经在我的应用程序中使用了 tw bootstrap，所以，我真的很想使用它。
回答by sascha
Ahem, this is easily done with pure CSS, you don't even need Bootstrap for this, neither its CSS classes
咳咳，这很容易用纯 CSS 完成，你甚至不需要 Bootstrap，也不需要它的 CSS 类
HTML:
HTML：
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
CSS:
CSS：
?.navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
Of course, you still have to style the links to remove text-decoration etc.
当然，您仍然需要设置链接样式以删除文本装饰等。
Edit:
编辑：
.navbar-inner {
background: none !important;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.navbar-inverse .nav .active > a {
background: 0 !important;
color: #333 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.navbar-inverse .nav > li > a {
color: #333 !important;
text-shadow: none !important;
}
.navbar-inverse .nav > li > a:hover {
color: #333 !important;
}
Demo : http://codepen.io/anon/pen/vJsfz
演示：http: //codepen.io/anon/pen/vJsfz
I've just made some simple "reset" lines with CSS to remove every color, borders and shadows (at least for Webkit browsers). Maybe you have to modify it a bit more. ?
我刚刚使用 CSS 制作了一些简单的“重置”行来移除所有颜色、边框和阴影（至少对于 Webkit 浏览器而言）。也许你需要再修改一下。?
回答by Simon
/* clear bootstrap header colors */
.navbar-default {
background-color: white;
border-color: white;
}
回答by davidrynn
Maybe I'm not understanding something but having just dealt with this, it seems like the easiest thing to do is override the default navbar color with a completely transparent color in the alpha channel...
也许我不明白什么，但刚刚处理过这个问题，似乎最简单的方法是在 alpha 通道中用完全透明的颜色覆盖默认导航栏颜色......
.navbar-default {
background: rgba(255, 255, 255, 0);
}
If using rgba, the first three numbers represent red, green, blue, on a scale of 0-255, and the last is the alpha channel, 0 being completely transparent and 1 being completely opaque.
如果使用 rgba，前三个数字代表红、绿、蓝，范围为 0-255，最后一个是 alpha 通道，0 表示完全透明，1 表示完全不透明。
Setting it to white would work, too, if your background happened to be white, but this way it doesn't matter what your background is.
如果您的背景恰好是白色，则将其设置为白色也可以，但这样您的背景就无关紧要了。
