Wie richtet man Text durch Text- * Klassen auf Twitter Bootstrap Button Group?

Question

Ich möchte den Text der button s auf einer Twitter Bootstrap Button Group mit Klasse text-left ausrichten.

Aber wenn ich die Klasse in a oder div Tags (als die erste Klasse oder die letzte Klasse) setzen, ändert sich die Ausrichtung nicht und ist immer in der Mitte.

Die linke Ausrichtung funktioniert nur, wenn ich eine style="text-align: left; auf dem a Tag setzen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group-vertical btn-group-lg" role="group"> 
 
    <a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a> 
 
    <a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a> 
 
</div>

Answer 1

das, weil CSS die Bootstrap ist als standardmäßig text-align:center auf .btn Klasse, so durch die text-left Klasse auf dem gleichen Element eingesetzt wird, nicht wegen, die die gleiche Spezifität beeinflussen.

Erstellen Sie ein benutzerdefiniertes CSS dafür.

.btn-group-lg .btn { 
 
    text-align: left 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group-vertical btn-group-lg" role="group"> 
 
    <a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a> 
 
    <a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a> 
 
</div>