Was ist mit der Nav-Header-Klasse passiert?

Question

Mit Bootstrap 2.3.2 können Sie die Klasse nav-header wie folgt verwenden, um eine gruppierte Liste zu erstellen.

<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 die nav-header Klasse scheint entfernt worden zu sein, obwohl ich keine Erwähnung in der Dokumentation finden kann entfernt werden. Ich kann auch keinen Ersatz finden.

Ist diese Art von Funktionalität noch vorhanden? Wenn ja, wie ist der neue Weg?

Answer 1

In Bezug auf LESS-Dateien und Github-Projekt, hat nav-list und nav-header in Bootstrap 3 nie existiert. Ich denke, es wurde vergessen.

Sie können ein ähnliches Verhalten mit dieser Art von Hack erhalten:

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>

Wickeln Sie Ihre Header in einer <a>, fügen Sie die Klasse .disabled und Ihre eigene .nav-header Klasse erstellen.

EDIT Nach this issue und this changelog, nav-list wurde von list-group ersetzt, aber Sie haben keine wirkliche Möglichkeit, das gleiche Verhalten für Kopf zu bekommen.

Answer 2

Obwohl Ihre Nav-Liste ist kein Dropdown-Menü mit der dropdown-header CSS-Klasse funktioniert.

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