Html 在折叠的导航引导程序中添加分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40810327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Separator In Collapsed Nav Bootstrap
提问by carloabelli
I am trying to add a separator in the collapsed nav when viewed on mobile. Ideally the nav would look exactly the same as it does not when not collapsed, but when collapsed would have a separator between "About" and "Log In".
在移动设备上查看时，我试图在折叠的导航中添加分隔符。理想情况下，导航看起来与未折叠时完全相同，但折叠时在“关于”和“登录”之间会有一个分隔符。
Here is the code for the 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>
I have tried adding <li role="separator" class="divider"></li>where I want the separator, but it does not show up:
我曾尝试添加<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>
How can I add a separator for the collapsed nav?
如何为折叠的导航添加分隔符？
This separator would hopefully look very similar to that of a dropdown in a nav:
这个分隔符有望与导航中的下拉列表非常相似：
采纳答案by Swapna
It does not show up as It is defined as follows in Bootstrap css:
它没有显示，因为它在 Bootstrap css 中定义如下：
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
And you do not have .dividerunder .dropdown-menu
而你没有.divider下.dropdown-menu
What you should do ?
你应该怎么做？
@media (max-width:767px){
.divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
}
回答by Pragabhava
回答by Richard Rebeco
You have to put this code:
你必须把这个代码：
<li role="separator" class="divider"></li>
<li role="separator" class="divider"></li>
between your own "< li >" tags.
在您自己的“< li >”标签之间。
Example:
例子：
<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>
回答by Mavelo
Boostrap 4.1 Solution
Boostrap 4.1 解决方案
Was trying to accomplish this in a BS4.1 Navbar component and ended up here (via Google). Since .dividerdoes not exist in this version, I used <hr>to achieve the desired result...
试图在 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>
Bonus: This <hr>did not affect expanded display since its margins place it behind the next .nav-itemelement :)
奖励：这<hr>不会影响扩展显示，因为它的边距将它放在下一个.nav-item元素的后面:)
Note: .border-topwas added to the <hr>for lighter color.
注意：.border-top被添加到<hr>更浅的颜色中。
回答by Sid Biffi
回答by Jan Kaifer
If you don't want to touch css there is little hack for it :D. Instead of
如果你不想接触 css，那么它就没什么 hack 了：D。代替
<li role="separator" class="divider"></li>
use this
用这个
<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>
Bootstrap gives forms 1px borders on top and bottom when collapsed. You can use this and insert empty form which is invisible while expanded but with one border while collapsed.
Bootstrap 在折叠时在顶部和底部为表单提供 1px 边框。您可以使用它并插入空表单，该表单在展开时不可见，但在折叠时有一个边框。
