18

With Bootstrap 2.3.2 you could use the nav-header class as follows to create a grouped list.

<ul class="nav nav-pills nav-stacked">
    <li class="nav-header">Group A</li>
    <li><a href="/items/1">Item 1</a></li>
    <li><a href="/items/2">Item 2</a></li>
    <li><a href="/items/3">Item 3</a></li>
    <li class="nav-header">Group B</li>
    <li><a href="/items/4">Item 4</a></li>
    <li><a href="/items/5">Item 5</a></li>
</ul>

Reference

In Bootstrap 3.0.0 the nav-header class seems to have been removed, though I can't find any mention of it being removed in the docs. I also can't find a replacement.

Is this kind of functionality still present? If so, what's the new way?

4

2 回答 2

19

关于 LESS 文件和 Github 项目，在 Bootstrap 3nav-list中nav-header从未存在过。我猜它已经被遗忘了。

您可以使用这种 hack 获得类似的行为：

ul {
    width: 300px;
    margin: 20px;
}
.nav > li.nav-header > a {
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills nav-stacked">
    
    <li class="nav-header"><a>Group A</a></li>
    <li><a href="/items/1">Item 1</a></li>
    <li><a href="/items/2">Item 2</a></li>
    <li><a href="/items/3">Item 3</a></li>
    
    <li class="nav-header"><a>Group B</a></li>
    <li><a href="/items/4">Item 4</a></li>
    <li><a href="/items/5">Item 5</a></li>
    
</ul>

将您的标题包装在 a 中<a>，添加类.disabled并创建您自己的.nav-header类。

编辑 根据这个问题和这个 changelog，nav-list已被替换list-group，但你没有任何真正的方法来获得标题的相同行为。

于 2013-08-20T08:11:11.850 回答
17

即使您的导航列表不是使用dropdown-headercss 类的下拉列表也可以。

<ul class="nav nav-pills nav-stacked">
    <li class="dropdown-header">Group A</li>
    <li><a href="/items/1">Item 1</a></li>
    <li><a href="/items/3">Item 3</a></li>

    <li class="dropdown-header">Group B</li>
    <li><a href="/items/4">Item 4</a></li>
    <li><a href="/items/5">Item 5</a></li>
</ul>
于 2013-09-03T15:27:16.797 回答