Question

具有类似以下内容的代码：

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

类“divider”无法正常工作。我错过了什么吗？

http://jsfiddle.net/isherwood/B9gHc

Answer 1

{1}}类在Bootstrap 3中已更改为divider ..

nav-divider

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

<强>更新

<li class="nav-divider"></li>已在v3.0.1中弃用

Answer 2

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

由于弃用。根据您的喜好进行更改。

如何为“nav-pills”和“nav-stacked”显示“divider”

2 个答案: