在Collapsed Nav Bootstrap中添加分隔符

Question

我想在移动设备上查看时在折叠导航中添加分隔符.理想情况下,导航将看起来与未折叠时的导航看起来完全相同,但折叠时在"关于"和"登录"之间会有一个分隔符.

以下是导航的代码:

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

的jsfiddle

我已经尝试添加<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>

的jsfiddle

如何为折叠导航添加分隔符？

希望这个分隔符看起来非常类似于导航中的下拉列表:

Answer 1

它没有显示,因为它在Bootstrap css中定义如下:

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

而且你不必.divider下.dropdown-menu

你应该怎么做？

@media (max-width:767px){
  .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }
}

Answer 2

在Bootstrap v4.0.0-alpha.6中，您可以使用

<div class="dropdown-divider"></div>

jsFiddle

Answer 3

你必须把这个代码：

<li role="separator" class="divider"></li>

在您自己的“< li >”标签之间。

例子：

<ul class="dropdown-menu" aria-labelledby="drop2">
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
  <li role="separator" class="divider"></li>
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
</ul>