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

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

jsFiddle

它不会显示为它在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;
    }
}

你必须把这段代码：
<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>

Bootstrap 4.1解决方案

试图在BS4.1 Navbar组件中实现这一点，并最终在这里（通过Google）。由于.divider在这个版本中不存在，所以我使用<hr>来实现所需的结果...

<ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#generator">Social Links</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/facebook-link-generator/#opengraph-generator">Open Graph</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/twitter-link-generator/#twitter-card-generator">Twitter Cards</a></li>
    <li class="nav-item"><a class="nav-link" href="/json-ld-generator#json-ld-generator">JSON-LD</a></li>
    <li class="nav-item"><hr class="border-top"></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#donation">Feeling Generous?</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#contact">Need a Developer?</a></li>
</ul>

额外的好处：这个<hr>不会影响扩展显示，因为它的边距将它放在下一个.nav-item元素后面：）
注：.border-top被添加到<hr>以获得更浅的颜色。

你可以插入一个

<hr>

标记而不是分隔符like this：

<ul class="nav navbar-nav navbar-right">
        <hr>            
        <li><a href="#">Log In</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>

请告诉我是否如你所愿。

在Bootstrap 5中，可以用css类dropdown-divider将其添加为列表项，如下所示：

<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Your dropdown name
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li>
                <a class="dropdown-item" href="#">Item 1<a>
            </li>
            <li class="dropdown-divider"></li>
            <li>
                <a class="dropdown-item" href="#">Item 2<a>
            </li>
        </ul>
    </li>
</ul>

如果你不想接触css，有一点黑客为它：D.而不是

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

使用此

<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>

Bootstrap在折叠时在顶部和底部提供1px的边框。您可以使用此方法插入展开时不可见但折叠时只有一个边框的空表单。