Comment puis-je aligner correctement les boutons Twitter Bootstrap?
J'ai une simple démonstration ici:
<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?
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}
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 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>
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.
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; }
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>
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.
- l'URL du fichier bootstrap.css n'est pas valide. (Peut-être que cela a fonctionné lorsque vous avez posé la question).
- 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. - 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 :))
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>
Appliquez la classe pull-right au bouton . http://getbootstrap.com/css/#helper-classes-floats -> Helper classes
Ce lien aidera
Tirer à droite a été amorti à partir de la v3.1.0 . Juste un heads-up.
http://getbootstrap.com/components/#callout-dropdown-pull-right
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
<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;
}
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é!
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
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>
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