Richten Sie die rechten Symbole in den Bootstrap-Schaltflächen einer Seitenleiste aus.

Question

Ich möchte das Symbol in einer Bootstrap-Schaltfläche ausrichten, die sich wiederum in einer Navigationsleiste in einer linken Spalte befindet. Ich habe ein Dutzend Modifikationen in this Geige versucht. Vielleicht .btn-group ist keine gute Idee?

ich in Firebug, dass ein .btn-group in einer anderen .btn-group machen meine Anker sehen kann, diese Regel zu folgen:

.btn-group-justified > .btn-group .btn { 
    width: 100%; 
} 

aber auf der anderen Seite eines .btn-group mein Anker schlechter macht als sie folgen diesem:

.btn-group-justified > .btn, .btn-group-justified > .btn-group { 
    display: table-cell; 
    float: none; 
    width: 1%; 
} 

Auch ein <button> innerhalb einer .navbar verhält sich wirklich seltsam!

In der jsfiddle ist der erste Knopf innerhalb zwei .btn-group s, der zweite ist innerhalb einer Gruppe Klasse. Ich habe verschiedene Lösungen des Problems, aber keine mit Schaltflächen und reduzierbaren Panels in einer Navbar gesehen.

Answer 1

Ich demonstriere meine Lösung there.

ich einfach eine alte Lösung für dieses Problem neu implementieren (Ich mag es nennen die Top-Bar Fenster Ausrichtungsproblem):

ich diese Stile zu einem externen Wrapper gab:

.sidebar-btn { 
    display: table; 
    width: 100%; 
} 

und nach intern:

.sidebar-btn > * { 
    display: table-cell; 
} 

Jetzt können Sie die zweite <a> sehen am rechten Rand gedrückt werden, durch eine bestimmte Breite zu geben:

.sidebar-btn > *:nth-child(2) { 
    width: 14px; 
} 

Diese Lösung funktioniert unabhängig vom Bootstrap. Einige kosmetische Korrekturen sollten jedoch vorgenommen werden, um das Styling des Bootstrap zu erleichtern, wie man am endgültigen Code sehen kann.