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


452

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?


5
Pourquoi cette question est-elle balisée avec twitter-bootstrap-3 et twitter-bootstrap-2 ainsi que twitter-bootstrap ?
Andrew Grimm

5
Parce que c'est pertinent pour toutes les versions depuis 3/2013
Zim

Réponses:


693

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}


18
Je ne comprends pas cette réponse. Dans la question, l'exemple de code utilise déjà pull-right.
guival

@guival Je me demandais la même chose. stackoverflow.com/a/26546770/470749 implique que l'utilisation buttonau lieu de inputfera une différence.
Ryan

@ Ryan, cela fonctionne sur moi, à la fois en entrée et en bouton
Lesther

@aronadaal C'est du travail pour moi, merci!
Houari Zegai

249

Dans twitter bootstrap 3, essayez la classe pull-right

class="btn pull-right"


9
+1 pour mettre en évidence le changement. Mais cette dépréciation ne concerne que le menu déroulant qui a été remplacé par .dropdown-menu-right. Il n'a pas été déprécié dans son ensemble.
Shawn Vader

vous avez raison, la documentation ditwe've deprecated .pull-right on dropdown menus
ılǝ

3
J'ai dû utiliser pull-right dans la division externe du groupe btn: <div class = "btn-group pull-right">
Gerfried

17
pull-rightutilise float: right, réduisant ainsi les contenus verticaux les uns sur les autres. Enveloppez le bouton avec text-rightDIV comme ceci -<div class="text-right">button...</div>
hashbrown

137

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>


6
Je pense que c'est mieux que tirer à droite car cela empêche le contenu vertical de s'effondrer les uns sur les autres et évite d'avoir à ajouter plus de balisage juste pour contourner cela.
Tony Wall

2
Je vous remercie. Le problème avec "pull-right" est qu'il supprime toutes les marges des boutons. Cela maintient les marges mais déplace les éléments vers la droite. Parfait!
PR Whitehead

Pourquoi text-right doit être en div contenant ce bouton au lieu de simplement class="btn btn-default text-right"en bouton ???
Krystian Polska

50

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.


Ils travaillent pour moi, mais vous ne devriez pas avoir besoin de vous fier aux liens. Lisez la réponse pour une explication sur l'alignement à droite.
Zim

19

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; }

18

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>

12

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 :))


11

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>

7

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>




2

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é!


5
pas besoin de css personnalisé, car l'autre réponse montre que tout le nécessaire est inclus dans le bootstrap
chrisweb

@chrisweb Que faire si vous avez d'autres plugins qui partagent la même classe CSS à votre insu et des problèmes conflictuels, que faites-vous? Asseyez-vous et regardez plutôt que de créer un CSS personnalisé et passez à autre chose? L'OP n'a jamais spécifié si d'autres plugins ont été ajoutés qui pourraient partager les mêmes classes CSS.
OmniPotens du

2
<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;
}

Pour moi, cela met les deux éléments de la liste sur une seule ligne
deltanovember

2

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


1

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.


-1

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>

Qu'est-ce que cela a à voir avec l'alignement à droite et les boutons?
Zim
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.