在repsonsive中添加分隔线引导程序导航栏

Question

我想在响应式Bootstrap导航栏中的菜单项之间添加分隔线。我尝试使用border-bottom，但我需要它在两侧插入。这是我想实现（颜色是不是点这里）：

正如你可以看到线不从屏幕的边缘开始。

我该如何做到这一点？

这里是我当前的代码：

<div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</a></li> 
     </ul> 
    </div> 

Answer 1

应用边界在标签中的a的伪元素，定位position: absolute和使用left和right值占该元素的填充使边界与文本对齐。

.nav>li>a:after { 
 
    content: ''; 
 
    border-bottom: 1px solid red; 
 
    position: absolute; 
 
    bottom: 0; left: 15px; right: 15px; 
 
} 
 

 
/* you don't need this - just for the demo */ 
 
.collapse { 
 
    display: block!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</a></li> 
 
     </ul> 
 
    </div>