Comment puis-je obtenir mon Twitter Bootstrap boutons pour aligner à droite?

Question

J'ai une simple démo ici:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

J'ai une liste non ordonnée et pour chaque élément de la liste je souhaite avoir le texte sur la gauche, puis aligné à droite du bouton. J'ai essayé d'utiliser tirez-droite, mais il complètement bousille l'alignement. Ce que je fais mal?

Answer 1

Pour Bootstrap 2.3, voir: http://getbootstrap.com/2.3.2/components.html#misc -> Helper Classes -> .pull droit

Pour Bootstrap 3, voir: http://getbootstrap.com/css/#helper-classes -> Helper classes

Donc, insérez le "pull-right" dans la classe string et laissez bootstrap organiser les boutons.

Answer 2

Dans twitter bootstrap 3 essayez la classe pull-right

class="btn pull-right"

Answer 3

Utiliser button balise au lieu de input et l'utilisation pull-right classe.

pull-right classe totalement les dégâts de vos boutons, mais vous pouvez résoudre ce problème en définissant des de la marge sur le côté droit.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Ensuite, utilisez le code CSS suivant pour la classe

.RbtnMargin { margin-left: 5px; }

Answer 4

Désolé pour la réponse à une ancienne déjà répondu à la question, mais j'ai pensé que je ferais remarquer un couple de raisons que votre jsfiddle ne fonctionne pas, dans le cas d'autres check it out et se demandent pourquoi les pull-droit classe comme décrit dans la accepté de répondre ne fonctionne pas.

1. l'url du fichier d'amorçage.fichier css n'est pas valide. (peut-être qu'il a travaillé quand vous avez posé la question).
2. vous devez ajouter l'attribut: type="button" à votre élément d'entrée, ou il ne sera pas rendue sous forme d'un bouton - il va être rendu comme une zone de saisie. Mieux encore, faites - <button> élément à la place.
3. En outre, parce que le pull-droite utilise des flotteurs, vous obtiendrez des étalement de la disposition des boutons, car chaque LI n'a pas assez de hauteur pour accueillir la hauteur du bouton. L'ajout de certains line-height et min-hauteur de la css à la LI va le traiter.

travail de violon: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"</li>
</ul>

(J'ai aussi ajouté un min-width sur les boutons que je ne pouvais pas supporter de le regarder d'un drapeau à droite justifié à regarder les boutons en raison de différentes largeurs :) )

Answer 5

En utilisant le Bootstrap pull-right helper ne travaillent pas pour nous, car il utilise float: right, ce qui forces de l' inline-block éléments block. Et lorsque l' .btns deviennent block, ils perdent le naturel de la marge qu' inline-block assurait quasiment comme des éléments textuels.

Donc, au lieu de cela, nous avons utilisé direction: rtl; sur l'élément parent, qui provoque le texte à l'intérieur de cet élément de mise en page de droite à gauche, et qui provoque inline-block éléments de mise en page de droite à gauche, trop. Vous pouvez utiliser MOINS comme suit pour empêcher les enfants d'être énoncées rtl trop:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

et de l'utiliser comme:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>