Wie kann ich meine Twitter Bootstrap Buttons rechts ausrichten?

Question

Ich habe hier eine einfache Demo:

    Eins 
    Zwei 

Ich habe eine ungeordnete Liste und für jedes Listenelement möchte ich Text auf der linken Seite und dann einen rechts ausgerichteten Button haben. Ich habe versucht, pull-right zu verwenden, aber das vermasselt die Ausrichtung komplett. Was mache ich falsch?

  Eins 
  Zwei

Answer 1

Fügen Sie pull-right in das Klassenattribut ein und lassen Sie Bootstrap die Schaltflächen anordnen.

Für Bootstrap 2.3 siehe: http://getbootstrap.com/2.3.2/components.html#misc > Hilfsklassen > .pull-right.

---

Für Bootstrap 3 siehe: https://getbootstrap.com/docs/3.3/css/#helper-classes > Hilfsklassen.

---

Für Bootstrap 4 siehe: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

Der Befehl pull-right wurde entfernt und durch float-right oder im Allgemeinen durch float-{sm,md,lg,xl}-{left,right,none} ersetzt

---

Für Bootstrap 5 siehe: https://getbootstrap.com/docs/5.0/utilities/float/

Die nächstgelegene Lösung wäre float-end.

Answer 2

In Twitter Bootstrap 3 versuchen Sie die Klasse pull-right

class="btn pull-right"

Answer 3

"pull-right" class ist möglicherweise nicht der richtige Weg, da es "float: right" statt text-align verwendet.

Beim Überprüfen der Bootstrap 3-CSS-Datei fand ich die "text-right" Klasse in Zeile 457. Diese Klasse sollte der richtige Weg sein, um den Text rechts auszurichten.

Einige Codebeispiele: Für Bootstrap 3 & 4

            Standard

Für Bootstrap 5

            Standard

Answer 4

Aktualisierung 2019 - Bootstrap 4.0.0

Die Klasse pull-right heißt in Bootstrap 4 jetzt float-right...

        Eins 
        Zwei 

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 benutzt und viele Elemente display:flex haben, was dazu führen kann, dass float-right nicht funktioniert. In einigen Fällen funktionieren die util-Klassen wie align-self-end oder ml-auto, um Elemente, die sich innerhalb eines Flexbox-Containers wie einer Bootstrap 4 .row, einer Card oder einem Nav befinden, rechts auszurichten.

Denken Sie auch daran, dass text-right immer noch bei Inline-Elementen funktioniert.

Beispiele für rechtsbündige Ausrichtung in Bootstrap 4

---

Bootstrap 3

Verwenden Sie die Klasse pull-right.

Answer 5

Zusätzlich zur akzeptierten Antwort, wenn Sie in Containern und Spalten arbeiten, die bereits eingebaute Polsterung von Bootstrap haben, habe ich manchmal festgestellt, dass eine vollständig gestreckte Spalte mit einem Kind-div, das die Führung übernimmt, der beste Weg ist.

            Ich bin rechts ausgerichtet und berücksichtige dabei die Container-Spalten-Polsterung

Alternativ können alle Ihre Spalten zusammen die Gesamtanzahl der Rasterspalten (standardmäßig 12) ergeben, wobei die erste Spalte versetzt ist.

        Dieser Inhalt und sein Geschwister..

        sind insgesamt rechts ausgerichtet, dank der Verschiebung der ersten Spalte und der Summe der verwendeten Spalten, die der Gesamtanzahl entspricht (12).