twitter-bootstrap 导航头类发生了什么?

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

What happened to nav-header class?

twitter-bootstraptwitter-bootstrap-3

提问by Timothy Shields

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

使用 Bootstrap 2.3.2,您可以nav-header按如下方式使用该类来创建分组列表。

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

在 Bootstrap 3.0.0 中,nav-header该类似乎已被删除,但我在文档中找不到任何提及它已被删除的内容。我也找不到替代品。

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

这种功能还存在吗?如果是这样,新的方法是什么?

回答by zessx

Regarding LESS files and Github project, nav-listand nav-headerhas never existed in Bootstrap 3. I guess it has been forgotten.

关于LESS文件和Github上项目,nav-list并且nav-header从未在引导3.存在我猜想它已经被遗忘了。

You can get a similar behavior using this kind of hack:

您可以使用这种 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>

Wrap your header in a <a>, add the class .disabledand create your own .nav-headerclass.

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

EDITAccording to this issueand this changelog, nav-listhas been replaced by list-group, but you don't have any real way to get the same behavior for headers.

编辑根据此问题此更改日志nav-list已替换为list-group,但您没有任何真正的方法来获得标题的相同行为。

回答by Skanaar

Even though your nav list isn't a dropdown using the dropdown-headercss class will work.

即使您的导航列表不是使用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>