垂直分频器在Bootstrap 3中不起作用
我打开了附带标准Bootstrap下载（bootstrap-3.0.0 \ examples \ navbar \ index.html）的Nav示例，并在两个链接之间添加了垂直分隔符。
但是，它似乎没有任何区别导航栏：
<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> Vertical Dividers已经在Bootstrap 3中掉线了。
你将不得不自己编码。
我认为这将使用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; } }
.divider-vertical { height: 50px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; }
现在你可以使用它
<ul> <li class="divider-vertical"></li> </ul>
因为我也想在一个项目中做同样的事情，你可以做类似的事情
HTML
<div class="col-md-6"></div> <div class="divider-vertical"></div> <div class="col-md-5"></div>
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 */ }
减
.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.. */ }
这里有一些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; }
可能这也有助于：
.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%; }
我发现使用一些顶部和底部填充的pipe道字符效果很好。 使用具有边框的div将需要更多的CSS垂直alignment，并获得水平间距，即使与其他元素。
CSS
.divider-vertical { padding-top: 14px; padding-bottom: 14px; }
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>
这工作奇妙的创build使用引导链接之间的分隔线。
HTML =>
<ul class="nav navbar-nav"> <li><a href="" class="white">Home</a></li> <p class="pipes">|</p> <li><a href="" class="white">About</a></li> <p class="pipes">|</p> <li><a href="" class="white">Terms</a></li> <li class="signin-link"> <button type="submit" class="btn btn-default signin-button">SIGN IN</button> </li> </ul>
CSS =>
.pipes { color:white; margin-top:14px; }
