Bootstrap gelten nav-stacked, wenn kleine Bildschirm

Question

Lassen Sie uns sagen, dass wir eine einfache Navigationsleiste wie dieses:
http://getbootstrap.com/components/#nav-pills

<ul class="nav nav-pills"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 

Wie kann ich die Klasse „nav-gestapelt“, um es hinzuzufügen, wenn das Fenster oder ein Elternteil Element ist kleiner als sagen 940px. Oder noch besser: sobald die Navigationsleiste nicht mehr alle Elemente in derselben Zeile enthalten kann.

Das wäre ziemlich einfach in Javascript, aber ich würde gerne eine reine CSS/HTML-Lösung sehen, aber ohne @media Abfragen zum Bootstrap-Quellcode hinzuzufügen.

Answer 1

Die Lösung gefunden. Es gibt eine Klasse namens "nav-gerecht". Es stapelt einfach die Navigationspillen, sobald sie nicht mehr in eine einzelne Reihe passen.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<ul class="nav nav-pills nav-justified"> 
 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
</ul>

Answer 2

Versuchen Sie, diese CSS zu Ihrer Lösung hinzuzufügen. Bitte überprüfen Sie das Ergebnis. Wollen Sie das erreichen?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (min-width: 768px) { 
 
    .nav-justified > li { 
 
    display: inline-block; 
 
    width: auto; 
 
    } 
 
}

<ul class="nav nav-pills nav-justified"> 
 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
</ul>