垂直分隔线在 Bootstrap 3 中不起作用答案

【问题标题】：Vertical divider doesn't work in Bootstrap 3垂直分隔线在 Bootstrap 3 中不起作用
【发布时间】：2017-10-26 10:46:40
【问题描述】：

我打开了标准 Bootstrap 下载附带的导航示例 (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>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

我认为这将使用 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;
     }
}

【讨论】：

@Jackson_Sandland 知道如何让它们更短吗？
@carbon_ghost -> 我在下面提交了一个对我有用的答案 - 希望对你也有用。
为了使它们更短：减少 height 并从 0 增加顶部和底部 margin 以便高度 + 上边距 + 下边距 == 50px。

【解决方案2】：

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

现在你可以使用它了

<ul>
    <li class="divider-vertical"></li>
</ul>

【讨论】：

【解决方案3】：

因为我也想在项目中做同样的事情，所以你可以做类似的事情

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.. */
}

【讨论】：

【解决方案4】：

如果您自定义导航栏，这里有一些 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;
}

【讨论】：

【解决方案5】：

我发现使用带有一些顶部和底部填充的管道字符效果很好。使用带边框的 div 将需要更多的 CSS 来垂直对齐它并获得水平间距，即使与其他元素也是如此。

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">&#124;</li>
    <li><a href="#">Faq</a></li>
    <li class="divider-vertical">&#124;</li>
    <li><a href="#">News</a></li>
    <li class="divider-vertical">&#124;</li>
    <li><a href="#">Contact</a></li>
</ul>

【讨论】：

【解决方案6】：

也许这也会有所帮助：

.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%;
}

【讨论】：