垂直分隔线在 Bootstrap 3 中不起作用 [英] Vertical divider doesn't work in Bootstrap 3

问题描述

我打开了标准 Bootstrap 下载附带的 Nav 示例 (bootstrap-3.0.0\examples\navbar\index.html) 并在两个链接之间添加了垂直分隔线.

但是，它似乎对导航栏没有任何影响:

<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>

解决方案

我认为这将使其重新使用 3.0

.navbar .divider-vertical {高度:50px；边距:0 9px；右边框:1px 实心 #ffffff；左边框:1px 实心 #f2f2f2;}.navbar-inverse .divider-vertical {边框右颜色:#222222；边框左颜色:#111111；}@media(最大宽度:767px){.navbar-collapse .nav >.divider-垂直{显示:无；}}

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.

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>

解决方案

I think this will bring it back using 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;
     }
}

这篇关于垂直分隔线在 Bootstrap 3 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！