it-swarm.dev

Comment puis-je aligner correctement les boutons Twitter Bootstrap?

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

413
deltanovember

Insérez pull-right dans 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 auxiliaires.


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

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

621
aronadaal

Dans Twitter bootstrap 3, essayez la classe pull-right

class="btn pull-right"
246
Shawn Vader

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 de 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.

Un 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>

125
César León

Mise à jour 2018 - Bootstrap 4.0.0

La classe pull-right est maintenant float-right dans 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.

Est-ce que float-right ne fonctionne toujours pas?

Rappelez-vous que Bootstrap 4 est maintenant flexbox, et de nombreux éléments sont display:flex, ce qui peut empêcher le fonctionnement de float-right. Dans certains cas, les classes util telles que align-self-end ou ml-auto permettent d'aligner à droite les éléments contenus dans un conteneur Flexbox, tels que Bootstrap 4 .row, Card ou Nav.

Rappelez-vous également que text-right fonctionne toujours sur les éléments en ligne.

Bootstrap 4 align right exemples


Bootstrap 3

Utilisez la classe pull-right.

34
Zim

Utilisez la balise button au lieu de input et utilisez la classe pull-right.

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

Puis utilisez le CSS suivant pour la classe

.RbtnMargin { margin-left: 5px; }
19
Shehzad Mehmood

Ajoutant à la réponse acceptée, lorsque je travaille dans des conteneurs et des colonnes intégrant un rembourrage intégré à partir de bootstrap, j’ai parfois une colonne complètement étendue avec une div enfant qui tire le résultat.

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

Vous pouvez également ajouter toutes vos colonnes à votre nombre total de colonnes de grille (12 par défaut) et faire en sorte 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>
17
yuvilio

Désolé de répondre à une question plus ancienne déjà répondue, mais je pensais indiquer quelques raisons pour lesquelles votre jsfiddle ne fonctionne pas, au cas où d’autres le vérifieraient et se demanderaient pourquoi la classe de tirage comme décrit dans la réponse acceptée ne ne travaille pas ici. 

  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 l'élément <button> à la place.
  3. De plus, étant donné que Pull-right utilise des valeurs flottantes, la disposition des boutons sera décalée, car chaque LI n'a pas une hauteur suffisante pour s'adapter à la hauteur du bouton. L'ajout de quelques CSS line-height ou min-height au LI réglerait ce problème.

travail du 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 également ajouté une largeur minimale aux boutons, car je ne pouvais pas supporter l'apparence d'un aspect irrégulier, justifié à droite, en raison de la largeur différente :))

12
Allan Nienhuis

L'utilisation de l'assistant Bootstrap pull-right n'a pas fonctionné car il utilise float: right, qui force les éléments inline-block à devenir block . Et lorsque les .btn deviennent block, ils perdent la marge naturelle que inline-block leur fournissait sous forme d'éléments quasi textuels.

Nous avons donc utilisé direction: rtl; sur l'élément parent, ce qui entraîne la mise en page de droite à gauche du texte de cet élément, ainsi que la mise en forme des éléments inline-block de droite à gauche. Vous pouvez utiliser MOINS comme suit pour éviter que les enfants ne soient aussi 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>
10
Carl G

Appliquez la classe pull-right au bouton . http://getbootstrap.com/css/#helper-classes-floats -> Helper classes

Ce lien aidera

4
Abhijit Kulkarni

Tirer à droite a été amorti à partir de la v3.1.0 . Juste un heads-up.

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

3
n1nja

vous pouvez également utiliser des colonnes vierges 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 :: Jsfiddle demo

2
user889030
<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 layout..apply styles for 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;
}
2
sasi

Pouvez-vous essayer un CSS personnalisé en plus du CSS d'amorçage pour voir si des modifications ont été apportées? Essayer

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

Si cela fonctionne, vous pouvez essayer de manipuler ce que vous avez ou d’ajouter un autre formatage à cela et d’obtenir ce que vous désirez. Parce que vous utilisez bootstrap, cela ne veut pas dire que s'il ne vous offre pas ce que vous voulez, vous devez simplement le gérer. Vous travaillez avec vos codes et vous ordonnez donc de faire ce que vous dites. À votre santé!

2
OmniPotens

Maintenant, vous devez ajouter .dropdown-menu-right à l'élément existant .dropdown-menu. Pull-Right n'est plus supporté. Plus d'infos ici http://getbootstrap.com/components/#btn-dropdowns

2
Dan Ochiana

Dans Bootstrap 4: essayez cette méthode 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>
0
Shahriyar Ahmed

De Bootstrap V3.3.1 le style CSS suivant va résoudre ce problème

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

Remarque: j'ai essayé toutes les suggestions des publications ci-dessus et toutes les adresses des versions antérieures et ne fournit pas de correctif pour les versions de démarrage de Newset 

0
Uri Lukach