Comment puis-je aligner mes boutons Twitter Bootstrap à droite?

J'ai une démo simple 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 du texte à gauche, puis un bouton aligné à droite. J'ai essayé d'utiliser le pull-right mais cela gâche complètement l'alignement. Qu'est-ce que je fais mal?

Insérez pull-rightdans l'attribut de classe et laissez bootstrap organiser les boutons.

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

Pour Bootstrap 3 , voir: https://getbootstrap.com/docs/3.3/css/#helper-classes > Classes d'assistance.

Pour Bootstrap 4 , voir: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

La pull-rightcommande a été supprimée et remplacée par float-rightou en général pourfloat-{sm,md,lg,xl}-{left,right,none}

Dans twitter bootstrap 3, essayez la classe pull-right

class="btn pull-right"

La classe "pull-right" peut ne pas être la bonne façon car dans les utilisations "float: right" au lieu de text-align.

En vérifiant le fichier css bootstrap 3, j'ai trouvé la classe "text-right" à la ligne 457. Cette classe devrait être la bonne façon d'aligner le texte à droite.

Du code:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Mise à jour 2019 - Bootstrap 4.0.0

La pull-rightclasse est maintenant float-rightdans Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

Il est également préférable de ne pas aligner la liste ul et d'utiliser des éléments de bloc pour les lignes.

Ne fonctionne float-righttoujours pas?

N'oubliez pas que Bootstrap 4 est désormais une boîte flexible et que de nombreux éléments display:flexpeuvent empêcher le flottement de fonctionner. Dans certains cas, les classes util aiment align-self-endou ml-autotravaillent pour aligner à droite les éléments qui sont à l'intérieur d'un conteneur flexbox comme un Bootstrap 4 .row, Card ou Nav.

N'oubliez pas que cela text-rightfonctionne toujours sur les éléments en ligne.

Bootstrap 4 aligner les bons exemples

Bootstrap 3

Utilisez la pull-rightclasse.

Utilisez la buttonbalise au lieu de inputet utilisez la pull-rightclasse.

pull-right classe gâche totalement vos deux boutons, mais vous pouvez résoudre ce problème en définissant une marge personnalisée 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>

Utilisez ensuite le CSS suivant pour la classe

.RbtnMargin { margin-left: 5px; }

Ajoutant à la réponse acceptée, lorsque je travaille dans des conteneurs et des colonnes qui ont intégré un remplissage à partir de bootstrap, j'ai parfois une colonne étirée complète avec un div enfant qui fait le tirage pour être le chemin à parcourir.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Sinon, faites en sorte que toutes vos colonnes totalisent le nombre total de colonnes de la grille (12 par défaut) et que la première colonne soit décalée.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Désolé de répondre à une question plus ancienne déjà répondue, mais je pensais souligner quelques raisons pour lesquelles votre jsfiddle ne fonctionne pas, au cas où d'autres le vérifieraient et se demander pourquoi la classe pull-right décrite dans la réponse acceptée ne fonctionne pas n'y travaille pas.

1. l'url du fichier bootstrap.css n'est pas valide. (peut-être que cela a fonctionné lorsque vous avez posé la question).
2. vous devez ajouter l'attribut: type = "button" à votre élément d'entrée, sinon il ne sera pas rendu sous forme de bouton - il sera rendu sous forme de zone de saisie. Mieux encore, utilisez <button>plutôt l' élément.
3. De plus, étant donné que l'extraction à droite utilise des flottants, vous obtiendrez un certain étalement de la disposition des boutons car chaque LI n'a pas assez de hauteur pour s'adapter à la hauteur du bouton. L'ajout d'un CSS de hauteur de ligne ou de hauteur minimale au LI résoudrait cela.

violon de travail: 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 également ajouté une largeur minimale aux boutons car je ne pouvais pas supporter l'apparence d'un aspect déchiré et justifié à droite en raison des largeurs variables :))

L'utilisation de l' pull-rightassistant Bootstrap n'a pas fonctionné pour nous car il utilise float: right, ce qui oblige les inline-blockéléments à devenirblock . Et quand les .btns deviennent block, ils perdent la marge naturelle qui les inline-blockfournissait comme éléments quasi-textuels.

Au lieu de cela, nous avons utilisé direction: rtl;l'élément parent, ce qui entraîne la mise en page du texte à l'intérieur de cet élément de droite à gauche, et également la inline-blockmise en page des éléments de droite à gauche. Vous pouvez utiliser MOINS comme ci-dessous pour éviter que les enfants ne soient également disposés rtl:

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

  * {
    direction: ltr;
  }
}

et l'utiliser comme:

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

Dans Bootstrap 4 : essayez de cette façon avec Flexbox. Voir la documentation dans getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

La traction à droite a été dépréciée à partir de la v3.1.0. Juste un avertissement.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Appliquez la pull-rightclasse pour le bouton. http://getbootstrap.com/css/#helper-classes-floats -> Classes d'assistance

Ce lien vous aidera

Vous devez maintenant ajouter .dropdown-menu-right à l'élément .dropdown-menu existant. pull-right n'est plus supporté. Plus d'informations ici http://getbootstrap.com/components/#btn-dropdowns

Pouvez-vous essayer un CSS personnalisé en dehors du CSS d'amorçage pour voir si des changements ont été apportés. Essayer

.move-rigth{
    display: block;
    float: right;
}

Si cela fonctionne, vous pouvez essayer de manipuler ce que vous avez ou d'ajouter d'autres formats à cela et de réaliser ce que vous désirez. Parce que vous utilisez le bootstrap ne signifie pas que s'il ne vous offre pas ce que vous voulez, vous le gérez simplement. Vous travaillez avec vos codes et vous lui ordonnez donc de faire ce que vous dites. À votre santé!

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

je viens d'utiliser la mise en page .. appliquer les styles pour li ..

ou

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

en CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

vous pouvez également utiliser des colonnes vides pour donner des espaces à gauche

comme

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Démo :: Démo Jsfiddle

Depuis Bootstrap V3.3.1, le style CSS suivant résoudra ce problème

.modal-open{
    padding-right: 0 !important;
}

Remarque: J'ai essayé toutes les suggestions dans les articles ci-dessus et toutes les adresses des anciennes versions et je ne fournis pas de correctif aux versions de démarrage du newset.

pour la documentation de bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>