您的位置：首页 > Web前端 > BootStrap

Bootstrap导航栏中按钮间添加竖线分隔

2017-12-03 18:27 120 查看

要实现的效果如图所示：

这里没有什么难点，只是感觉这种布局使用挺多的，纪录一下，方便以后使用。

曾经想过的思路：

添加相同的

<li><a href="#">|</a></li>

标签，

但是元素间距离会变大，因为｜占据同等宽度

给元素添加右边框，

审查元素发现，元素高度跟导航栏一样高，所以｜会跟导航栏一样高

最终用伪元素实现了想要的效果

`.navbar-right li:after {
content: '';
position: absolute;
width: 1px;
height: 14px;
background-color: #a4a4a4;
top:18px;
right: 0;
｝

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 布局

相关文章推荐

新的分享

章节导航