垂直分隔符在Bootstrap 3中不起作用
垂直分隔符在Bootstrap 3中不起作用
提问于 2013-10-06 07:34:23
我打开了标准Bootstrap下载中附带的Nav示例(bootstrap-3.0.0\examples\navbar\index.html)，并在其中两个链接之间添加了垂直分隔符。
然而，这似乎对导航栏没有任何影响：
<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>回答 5
Stack Overflow用户
发布于 2014-02-13 09:07:15
我认为这将使它重新使用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;
}
}Stack Overflow用户
发布于 2014-01-25 23:55:15
.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}现在你可以使用它了
<ul>
<li class="divider-vertical"></li>
</ul>Stack Overflow用户
发布于 2014-10-23 07:53:46
如果您自定义导航栏，这里有一些较少的内容：
.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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19203816
复制相关文章
相似问题
腾讯云开发者
