Html 在折叠的导航引导中添加分隔符

在手机上查看时，我试图在折叠的导航中添加分隔符。理想情况下，nav看起来与未折叠时完全相同，但折叠时在“大约”和“登录”之间有一个分隔符

以下是导航代码：

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

切换导航

我已尝试在需要分隔符的位置添加

，但它没有显示：

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

切换导航

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

该分隔符有望与导航中的下拉菜单非常相似：

---

它不会显示，因为它在引导css中的定义如下：

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

而且您在

下拉菜单下没有
.divider

你应该怎么做

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

您可以插入

<hr>



标记而不是分隔符：







请告诉我这是不是你想要的
 您必须输入以下代码：


在您自己的“
”标记之间

例如：

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


你自己的li标签
你自己的li标签
你自己的li标签

你自己的li标签
你自己的li标签

如果你不想接触css，有一点小技巧：D。
而不是

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



用这个

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



折叠时，引导在顶部和底部为表单提供1px边框。您可以使用此选项并插入空表单，该表单在展开时不可见，但在折叠时有一个边框。
在Bootstrap v4.0.0-alpha.6中，您可以使用

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



Boostrap 4.1解决方案
试图在BS4.1NavBar组件中实现这一点，并最终在这里（通过谷歌）实现。由于此版本中不存在
.divider
，因此我使用
来实现所需的结果

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











额外好处：此
不会影响扩展显示，因为其边距将其放置在下一个
的后面。导航项目
元素：）

注意：
.border top
已添加到
以获得更浅的颜色。
谢谢！我没有把它放在
中，而是在类
的外面做了一个
。折叠的分隔符
，并将边距行修改为
边距：9px-15px。很好用！我尝试了这个解决方案，但当页面呈现时，它看起来很奇怪。最好在Ul、Li标签之间尝试这种方式：
注意：
规范只允许
子项。如果您尝试此操作，请记住包装水平尺。示例：
请参阅：如果发现额外的页边距，请使用
非常好的清洁解决方案
<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>