我想在移动设备上查看时在折叠导航中添加分隔符.理想情况下,导航将看起来与未折叠时的导航看起来完全相同,但折叠时在“关于”和“登录”之间会有一个分隔符.
以下是导航的代码：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
我尝试添加< li role =“separator”class =“divider”>< / li>我想要分隔符,但它没有出现：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="separator" class="divider"></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
如何为折叠导航添加分隔符？
希望这个分隔符看起来非常类似于导航中的下拉列表：
解决方法
它没有显示,因为它在Bootstrap css中定义如下：
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
你没有.dropdown-menu下的.divider
你应该怎么做？
@media (max-width:767px){
.divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
}
