在折叠导航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

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

这个分隔符应该看起来与导航中的下拉菜单非常相似：

- carloabelli

Answer 1

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

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

jsFiddle

- Pragabhava

Answer 2

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

- Swapna

---

谢谢！我将其从<ul>中移出，并创建了一个类为.collapsed-divider的外部<div>，并修改了边距线为margin: 9px -15px;。完美运行！ - carloabelli

Answer 3

您需要把以下代码放入您自己的"<li>"标签中：

<li role="separator" class="divider"></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>

- Richard Rebeco

Answer 4

Bootstrap 4.1 解决方案

我试图在BS4.1导航栏组件中实现这个效果，最终通过谷歌找到了这里。由于这个版本中不存在.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>中。

- Mavelo

---

优秀，一个干净的解决方案。 - anayarojo

Answer 5

你可以插入一个

标签。

<hr>

使用标签而不是分隔符像这样：

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

请告诉我是否符合您的要求。

- Sid Biffi

---

我尝试了这个解决方案，但在页面呈现时看起来很奇怪。最好在Ul、Li标签之间尝试这种方式：<li role="separator" class="divider"></li>。 - Richard Rebeco

注意: <ul>规范只允许包含<li>子元素。如果要使用<hr>标签，需要将其放在<li> </li>标记中。示例: <li><hr></li>参见: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul - Mavelo

如果您发现额外的边距，请使用<hr class="m-0">。 - Bagghi Daku

Answer 6

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

- Marty Staas

Answer 7

如果你不想碰CSS，这里有一个小技巧:D。 不要使用

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

使用这个。

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

Bootstrap在折叠时给表单添加了1像素的上下边框。您可以利用这一点插入一个空表单，在展开时不可见，但在折叠时有一个边框。

- Jan Kaifer