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