twitter-bootstrap 如何为“导航药丸”和“导航堆叠”显示“分隔线”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20664117/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:31:13  来源:igfitidea点击:

How can I get "divider" displayed for "nav-pills" and "nav-stacked"

twitter-bootstraptwitter-bootstrap-3

提问by user203687

Have code something like the following:

有如下代码:

<div class="container">

<div class="row">
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Available glyphs</a></li>
            <li class="disabled"><a href="#">How to use</a></li>
            <li><a href="#">Examples</a></li>
            <li class="divider"></li>
            <li><a href="#">Example</a></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Basic example</a></li>
            <li><a href="#">Vertical variation</a></li>
            <li class="divider"></li>
            <li><a href="#">Single button dropdowns</a></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Basic example</a></li>
            <li><a href="#">Checkboxes and radio addons</a></li>
            <li class="divider"></li>
            <li><a href="#">Justified</a></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Fixed to bottom</a></li>
            <li><a href="#">Static top</a></li>
            <li><a href="#">Inverted navbar</a></li>
        </ul>
    </div>
</div>

class "divider" is not working. Am I missing something?

类“分隔符”不起作用。我错过了什么吗?

http://jsfiddle.net/isherwood/B9gHc

http://jsfiddle.net/isherwood/B9gHc

回答by Zim

The dividerclass has changed to nav-dividerin Bootstrap 3..

divider班已更改为nav-divider在引导3 ..

 <li class="nav-divider"></li>

So you can use this without any custom CSS. http://bootply.com/101379

所以你可以在没有任何自定义 CSS 的情况下使用它。http://bootply.com/101379

UPDATE

更新

.nav-dividerhas been deprecated in v3.0.1

.nav-divider已在 v3.0.1 中弃用

回答by Snipe

<li class="nav-item"><hr style="width:90%;"></li>

<li class="nav-item"><hr style="width:90%;"></li>

Because of the deprecation. Change according to your liking.

因为弃用。根据自己的喜好改变。