web-dev-qa-db-fra.com

Bootstrap: aligner le texte du bouton à gauche

Comment puis-je aligner du texte à gauche dans un bouton bootstrap? J'ai plusieurs boutons avec du texte de longueur variable, et tous les boutons doivent avoir la même largeur. Je l'ai réalisé en utilisant la classe col-xs-11.

Exemple de code de bouton ci-dessous:

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11">

Est-il possible d'y parvenir sans créer un style personnalisé, autre que celui fourni par bootstrap? J'utilise Bootstrap v3.0.1

htmlcsstwitter-bootstraptwitter-bootstrap-3
25
Delon

ajoutez simplement text-left classe

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left">
14
Sasa

Le problème n'est pas de savoir comment css aligner le texte à gauche, le message d'origine demandait s'il y avait un bootstrap nom (s) de classe qui fonctionne pour cela.

Le .text-left fonctionne, mais le problème est qu'il y a un .btn qui est plus fort que text-left, je pense que c'est quelque chose bootstrap faut y penser.

Découvrez cette capture d'écran avec laquelle j'ai fait un test avec Chrome inspecter sur le site de Bootstrap. enter image description here

Dans mon Chrome, j'ajoute "text-left" sur le bouton de démonstration, et voici le résultat. Par conséquent, ayez! Important dessus!

.text-left {
  text-align: left !important;
}
23
bard

Ou utilisez le style en ligne si ce n'est qu'un seul bouton

style="text-align:left; padding-left:6px"
12
konzo

Vous pouvez simplement appliquer css de la manière normale au lieu d'utiliser des classes supplémentaires.

/*specific button*/    
#mybutton {
   text-align: left;
}

/*all input that have type button*/
input[type='button'] {
   text-align: left;
}
9
Pau

Ajoutez simplement! Important à la définition de votre bouton et cela forcera l'utilisation.

1
worsthorst