我打开了标准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>
发布于 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;
}
}
发布于 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>
发布于 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;
}
https://stackoverflow.com/questions/19203816
复制相似问题