Cosa è successo alla classe nav-header?

Question

Con Bootstrap 2.3.2 è possibile utilizzare la classe nav-header come segue per creare un elenco raggruppato.

<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

Nel Bootstrap 3.0.0 classe nav-header sembra essere stato rimosso, anche se non riesco a trovare alcuna menzione di esso che è rimosso nella documentazione. Anche io non riesco a trovare un sostituto.

Questo tipo di funzionalità è ancora presente? Se è così, qual è il nuovo modo?

Answer 1

Per quanto riguarda i file LESS e il progetto Github, nav-list e nav-header non sono mai esistiti in Bootstrap 3. Suppongo che sia stato dimenticato.

si può ottenere un comportamento simile di utilizzare questo tipo di 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>

avvolgere il vostro colpo di testa in un <a>, aggiungere la classe .disabled e creare il proprio .nav-header classe.

EDIT Secondo this issue e this changelog, nav-list è stato sostituito da list-group, ma non hanno alcun vero modo per ottenere lo stesso comportamento per le intestazioni.

Answer 2

Anche se la tua lista di nav non è un menu a discesa utilizzando la classe funzionerà.

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