Twitter bootstrap 垂直分隔器不';无法在引导3中工作
我打开了标准引导下载附带的Nav示例(Bootstrap-3.0.0\examples\navbar\index.html),并在两个链接之间添加了垂直分隔符 但是,它似乎对导航栏没有任何影响:Twitter bootstrap 垂直分隔器不';无法在引导3中工作,twitter-bootstrap,Twitter 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> <
<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>
现在你可以使用它了
<ul>
<li class="divider-vertical"></li>
</ul>
我认为这将使用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;
}
}
如果您自定义导航栏,这里为您提供了一些信息:
.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;
}
因为我也想在一个项目中做同样的事情,你可以做类似的事情 HTML
<div class="col-md-6"></div>
<div class="divider-vertical"></div>
<div class="col-md-5"></div>
更少
.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 */
}
.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.. */
}
也许这也会有帮助:
.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%;
}
我发现将管道角色与一些顶部和底部填充一起使用效果很好。使用带有边框的div将需要更多的CSS来垂直对齐它,并获得与其他元素的水平间距 CSS HTML
- &124李>
- &124李>
- &124李>
@Jackson\u Sandland有没有办法让它们变短?@carbon\u ghost->我在下面提交了一个适合我的答案——希望你也能这么做。要让它们变短:降低高度
并从0开始增加顶部和底部边距
,这样高度+顶部边距+底部边距==50px。
.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%;
}
.divider-vertical {
padding-top: 14px;
padding-bottom: 14px;
}
<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>