twitter-bootstrap 垂直分隔线在 Bootstrap 3 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19203816/
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
Vertical divider doesn't work in Bootstrap 3
提问by Sig 226
I opened the Nav example which comes with the standard Bootstrap download (bootstrap-3.0.0\examples\navbar\index.html) and added vertical dividers between two of the links.
我打开了标准 Bootstrap 下载 (bootstrap-3.0.0\examples\navbar\index.html) 附带的 Nav 示例，并在两个链接之间添加了垂直分隔线。
However, it doesn't seem to make any difference to the navigation bar:
但是，它似乎对导航栏没有任何影响：
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link3</a></li>
回答by Sergey Barskiy
I think this will bring it back using 3.0
我认为这将使其恢复使用 3.0
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
回答by john
.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
and now you can use it
现在你可以使用它了
<ul>
<li class="divider-vertical"></li>
</ul>
回答by ctf0
as i also wanted that same thing in a project u can do something like
因为我也想在一个项目中做同样的事情，你可以做类似的事情
HTML
HTML
<div class="col-md-6"></div>
<div class="divider-vertical"></div>
<div class="col-md-5"></div>
CSS
CSS
.divider-vertical {
height: 100px; /* any height */
border-left: 1px solid gray; /* right or left is the same */
float: left; /* so BS grid doesn't break */
opacity: 0.5; /* optional */
margin: 0 15px; /* optional */
}
LESS
较少的
.divider-vertical(@h:100, @opa:1, @mar:15) {
height: unit(@h,px); /* change it to rem,em,etc.. */
border-left: 1px solid gray;
float: left;
opacity: @opa;
margin: 0 unit(@mar,px); /* change it to rem,em,etc.. */
}
回答by Hyman Vial
I find using the pipe character with some top and bottom padding works well. Using a div with a border will require more CSS to vertically align it and get the horizontal spacing even with the other elements.
我发现使用带有一些顶部和底部填充的管道字符效果很好。使用带边框的 div 将需要更多的 CSS 来垂直对齐它并获得水平间距，即使与其他元素也是如此。
CSS
CSS
.divider-vertical {
padding-top: 14px;
padding-bottom: 14px;
}
HTML
HTML
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical">|</li>
<li><a href="#">Faq</a></li>
<li class="divider-vertical">|</li>
<li><a href="#">News</a></li>
<li class="divider-vertical">|</li>
<li><a href="#">Contact</a></li>
</ul>
回答by ioni
Here is some LESS for you, in case you customize the navbar:
如果您自定义导航栏，这里有一些 LESS：
.navbar .divider-vertical {
height: floor(@navbar-height - @navbar-margin-bottom);
margin: floor(@navbar-margin-bottom / 2) 9px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #ffffff;
}
回答by Kirill Shur
may be this will help also:
可能这也有帮助：
.navbar .divider-vertical {
margin-top: 14px;
height: 24px;
border-left: 1px solid #f2f2f2;
border-image: linear-gradient(to bottom, gray, rgba(0, 0, 0, 0)) 1 100%;
}
