Ich habe hier eine einfache Demo:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
Ich habe eine ungeordnete Liste und für jedes Listenelement möchte ich links Text und dann eine rechtsbündige Schaltfläche haben. Ich habe versucht, Pull-Right zu verwenden, aber dies bringt die Ausrichtung völlig durcheinander. Was mache ich falsch?
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
twitter-bootstrap-2
deltanovember
quelle
quelle
Antworten:
Legen Sie
pull-right
in das Klassenattribut und lassen Bootstrap die Tasten arrangieren.Für Bootstrap 2.3 finden Sie unter : http://getbootstrap.com/2.3.2/components.html#misc > Helper Klassen> .pull-Recht.
Für Bootstrap 3 finden Sie unter : https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper - Klassen.
Zum Bootstrap 4 finden Sie unter : https://getbootstrap.com/docs/4.0/utilities/float/#responsive
Der
pull-right
Befehl wurde entfernt und durchfloat-right
oder allgemein ersetztfloat-{sm,md,lg,xl}-{left,right,none}
quelle
pull-right
.button
anstelle voninput
einen Unterschied macht.Versuchen Sie in Twitter Bootstrap 3 die Klasse Pull-Right
quelle
we've deprecated .pull-right on dropdown menus
pull-right
verwendetfloat: right
, wodurch vertikale Inhalte übereinander kollabiert werden. Wickeln Sie den Knopf mittext-right
DIV wie<div class="text-right">button...</div>
Die Klasse "Pull-Right" ist möglicherweise nicht der richtige Weg, da in "float: right" anstelle von "Text-Align" verwendet wird.
Beim Überprüfen der Bootstrap 3-CSS-Datei habe ich in Zeile 457 die Klasse "text-right" gefunden. Diese Klasse sollte der richtige Weg sein, um den Text nach rechts auszurichten.
Etwas Code:
quelle
class="btn btn-default text-right"
in der Schaltfläche ???Update 2019 - Bootstrap 4.0.0
Die
pull-right
Klasse ist jetztfloat-right
in Bootstrap 4 ...http://www.codeply.com/go/nTobetXAwb
Es ist auch besser, die ul-Liste nicht auszurichten und Blockelemente für die Zeilen zu verwenden.
Funktioniert
float-right
immer noch nicht?Denken Sie daran, dass Bootstrap 4 jetzt Flexbox ist und viele Elemente
display:flex
verhindern, dass Float-Right funktioniert. In einigen Fällen mögenalign-self-end
oderml-auto
arbeiten die util-Klassen daran, Elemente, die sich in einem Flexbox-Container befinden, wie Bootstrap 4 .row, Card oder Nav, nach rechts auszurichten.Denken Sie auch daran, dass dies
text-right
auch bei Inline-Elementen funktioniert.Bootstrap 4 richtet die richtigen Beispiele aus
Bootstrap 3
Verwenden Sie die
pull-right
Klasse.quelle
Verwenden Sie
button
tag anstelle voninput
und verwenden Siepull-right
class.pull-right
Die Klasse bringt beide Schaltflächen völlig durcheinander, aber Sie können dies beheben, indem Sie auf der rechten Seite einen benutzerdefinierten Rand definieren.Verwenden Sie dann das folgende CSS für die Klasse
quelle
Wenn ich in akzeptierten Antworten arbeite, wenn ich in Containern und Spalten arbeite, die eine Auffüllung von Bootstrap eingebaut haben, habe ich manchmal eine vollständig gedehnte Spalte mit einem untergeordneten Div, der das Ziehen übernimmt, um der richtige Weg zu sein.
Alternativ können Sie alle Ihre Spalten zu Ihrer Gesamtzahl der Rasterspalten (standardmäßig 12) addieren und die erste Spalte versetzen lassen.
quelle
Es tut mir leid, dass ich auf eine ältere, bereits beantwortete Frage geantwortet habe, aber ich dachte, ich möchte auf einige Gründe hinweisen, warum Ihre jsfiddle nicht funktioniert, falls andere sie überprüfen und sich fragen, warum die in der akzeptierten Antwort beschriebene Pull-Right-Klasse dies nicht tut arbeite dort nicht.
<button>
stattdessen das Element.Arbeitsgeige: http://jsfiddle.net/3ejqufp6/
(Ich habe den Schaltflächen auch eine Mindestbreite hinzugefügt, da ich das Aussehen eines zerlumpten, rechtsbündigen Aussehens der Schaltflächen aufgrund unterschiedlicher Breiten nicht ertragen konnte :))
quelle
Die Verwendung des Bootstrap-
pull-right
Hilfsprogramms hat bei uns nicht funktioniert, da er verwendet wirdfloat: right
, wodurch Elemente gezwungeninline-block
werden, zu werdenblock
. Und wenn die.btn
s werdenblock
, verlieren sie den natürlichen Spielraum,inline-block
der sie als quasi-textuelle Elemente bereitstellte.Stattdessen haben wir
direction: rtl;
das übergeordnete Element verwendet, wodurch der Text in diesem Element von rechts nach links angeordnet wird und dieinline-block
Elemente auch von rechts nach links angeordnet werden. Sie können WENIGER wie folgt verwenden, um zu verhindern, dass auch Kinder ausgelegt werdenrtl
:und benutze es wie:
quelle
In Bootstrap 4 : Versuchen Sie dies auf diese Weise mit Flexbox. Siehe Dokumentation in getbootstrap
quelle
Nach rechts ziehen wurde ab Version 3.1.0 abgeschrieben. Nur ein Kopf hoch.
http://getbootstrap.com/components/#callout-dropdown-pull-right
quelle
pull-right
ist veraltet amdropdown-menu
. Es kann weiterhin für andere Komponenten verwendet werden.pull-right
Klasse für die Schaltfläche anwenden . http://getbootstrap.com/css/#helper-classes-floats -> HilfsklassenDieser Link wird helfen
quelle
Jetzt müssen Sie dem vorhandenen .dropdown-Menüelement .dropdown-menu-right hinzufügen. Pull-Right wird nicht mehr unterstützt. Weitere Informationen finden Sie hier http://getbootstrap.com/components/#btn-dropdowns
quelle
Können Sie ein benutzerdefiniertes CSS neben dem Bootstrap-CSS ausprobieren, um festzustellen, ob Änderungen vorliegen? Versuchen
Wenn es funktioniert, können Sie versuchen, das, was Sie haben, zu manipulieren oder andere Formatierungen hinzuzufügen und das zu erreichen, was Sie wünschen. Da Sie Bootstrap verwenden, bedeutet dies nicht, dass Sie es einfach verwalten, wenn es Ihnen nicht das bietet, was Sie möchten. Sie arbeiten mit Ihren Codes und befehlen ihr, das zu tun, was Sie sagen. Prost!
quelle
Ich habe gerade Layout verwendet. Stile für Li anwenden.
oder
in CSS
quelle
Sie können auch leere Spalten verwenden, um links Leerzeichen zu setzen
mögen
Demo :: Jsfiddle Demo
quelle
Ab Bootstrap V3.3.1 wird dieses Problem durch den folgenden CSS-Stil behoben
Hinweis: Ich habe alle Vorschläge in den obigen Beiträgen ausprobiert und alle Adressen älterer Versionen adressiert und keine Korrektur für Newset-Bootstrap-Versionen bereitgestellt.
quelle
für die Bootstrap 4- Dokumentation
quelle