首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >垂直分隔符在Bootstrap 3中不起作用

垂直分隔符在Bootstrap 3中不起作用
EN

Stack Overflow用户
提问于 2013-10-06 07:34:23
回答 5查看 129.9K关注 0票数 60

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

然而,这似乎对导航栏没有任何影响:

代码语言:javascript
复制
<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>
EN

回答 5

Stack Overflow用户

发布于 2014-02-13 09:07:15

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

代码语言:javascript
复制
.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;
     }
}
票数 108
EN

Stack Overflow用户

发布于 2014-01-25 23:55:15

代码语言:javascript
复制
.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

现在你可以使用它了

代码语言:javascript
复制
<ul>
    <li class="divider-vertical"></li>
</ul>
票数 22
EN

Stack Overflow用户

发布于 2014-10-23 07:53:46

如果您自定义导航栏,这里有一些较少的内容:

代码语言:javascript
复制
.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;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19203816

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档