twitter-bootstrap 更改垂直分隔线导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17355943/
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
Change vertical divider navbar
提问by ramiromd
I'm trying to change the background image of vertical divider class, in Bootstrap. I have this menu:
我正在尝试在 Bootstrap 中更改垂直分隔线类的背景图像。我有这个菜单：
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"></a>
<ul class="nav">
<li class="active"><a href="#">Nosotros</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Servicios</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Galería de fotos</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
In my css I try:
在我的 css 中，我尝试：
.navbar .nav .divider-vertical{
background-image: url("img/nav-div.jpg");
}
But nothing. Any ideas ?
但没什么。有任何想法吗 ？
回答by SavaMinic
That's because its inner width is 0, as only margins add up to outer width:
那是因为它的内部宽度为 0，因为只有边距加起来为外部宽度：
.divider-vertical {
height: 40px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
You need to add the inner width to it, e.g.
您需要为其添加内部宽度，例如
.navbar .nav .divider-vertical{
width: 20px;
background-image: url("img/nav-div.jpg");
}
You will probably need to lower the margins of the element to compensate for the added width (if you need .divider-verticalto stay 20pxwidth).
您可能需要降低元素的边距以补偿增加的宽度（如果您需要.divider-vertical保持20px宽度）。
回答by wilburlikesmith
This styling pretty much worked for me:
这种样式对我来说非常有用：
<style>
.navbar-nav > li {border-right: 1px solid #666;}
.navbar-nav {border-left: 1px solid #666;}
</style>
It magically covers the left and right borders of the main menu and the login area menu.
它神奇地覆盖了主菜单和登录区菜单的左右边框。
