Bootstrap .nav-pills falten Ausrichtung

Question

Ich benutze Nav-Pillen als eine Sammlung von Knebel für ein Tagging-System. Es ist eine ungeordnete Liste mit Listenelementen. Die Listeneinträge sind Setup wie dies mit Jade und NodeJS:

.row 
    .tagnav.col-xs-12 
    ul.ptag.nav.nav-pills 
     each tc in tagColours 
      li(onClick="selectTag('"+tc.tag+"', '"+tc.colour+"')").active #{tc.tag} 

Die Zeile wird mit in der Mitte des Bildschirms ausgerichtet sind:

.tagnav { 
    display: flex; 
    justify-content: center; 
    flex-direction: row; 
} 

etwa so:

Wenn ich das Fenster enger mache, beginnen die Nav-Pillen zu klappen (was gut ist), aber das Layout ist nicht angenehm. Dies ist, wie sie aussehen, wenn ich das Fenster kleiner machen:

Ich möchte sie in zentrierten Reihen schön aufreihen. Wie folgt aus (photos):

I Jade verwende für meine HTML, so kann ich die Tags dynamisch aus einem Array auf dem Server erhalten so für die jsfiddle habe ich die Tags setzen nur statisch in. Sie scheinen sich gleich zu verhalten. JSFiddle

Danke.

Answer 1

Hinzufügen Dies macht es besser:

.ptag.nav-pills > li.active { 
    color: white; 
    background-color: black; 
    border-radius: 15px; 
    padding: 5px 10px 5px 10px; 
    margin: 5px; 
} 
.nav-pills>li { 
    display: inline-block; 
} 
.nav-pills { 
    text-align: center; 
} 

Fiddle: https://jsfiddle.net/bnn9f3a3/

Answer 2

Wenn Sie die Flex-Stil pflegen wollen ..

(siehe unten Geige für eine besser lesbare Kommentare Erklärung)

.tagnav { 
 
    display: flex; 
 
} 
 
    
 
.ptag { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex: 1; 
 
} 
 
    
 
    li { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    margin: 5px; 
 
    padding: 5px 10px; 
 
    text-align: center; 
 
    font-variant: small-caps; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    color: white; 
 
    background-color: black; 
 
    border-radius: 15px; 
 
    cursor: pointer; 
 
} 
 
    
 
.ptag.nav-pills > li.inactive { 
 
    color: #909090; 
 
}

<div class="container"> 
 
    <br> 
 
    <div class="row"> 
 
    <div class="tagnav col-xs-12"> 
 
     <ul class="ptag nav nav-pills"> 
 
     <li class="active">tech</li> 
 
     <li class="active">art</li> 
 
     <li class="active">electronics</li> 
 
     <li class="active">dsp</li> 
 
     <li class="active">c++</li> 
 
     <li class="active">openframeworks</li> 
 
     <li class="active">processing</li> 
 
     <li class="active">graphics</li> 
 
     <li class="active">java</li> 
 
     <li class="active">unity3d</li> 
 
     <li class="active">c#</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Geige

basierend auf Ihre HTML-Struktur

https://jsfiddle.net/Hastig/x3mu0k1d/

original, für andere