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

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

Answer 2

Entschuldigung für die Antwort auf eine bereits beantwortete ältere Frage, aber ich dachte, ich würde ein paar Gründe nennen, warum Ihr jsfiddle nicht funktioniert, falls andere es überprüfen und sich fragen, warum die pull-right-Klasse, wie sie in der akzeptierten Antwort beschrieben wird, dort nicht funktioniert.

1. die URL zur bootstrap.css-Datei ist ungültig. (vielleicht hat es funktioniert, als Sie die Frage gestellt haben).
2. Sie sollten das Attribut: type="button" zu Ihrem Eingabeelement hinzufügen, sonst wird es nicht als Schaltfläche gerendert - es wird als Eingabefeld gerendert. Noch besser ist, das -Element zu verwenden.
3. Zusätzlich erhalten Sie durch die Verwendung von Floats mit pull-right ein wenig Versatz im Schaltflächenlayout, weil jedes LI nicht genug Höhe hat, um die Höhe der Schaltfläche aufzunehmen. Das Hinzufügen von etwas Zeilenhöhe oder min-height-CSS zu den LI würde das beheben.

Arbeits-Fiddle: http://jsfiddle.net/3ejqufp6/

  Eins 
  Zwei 

(Ich habe auch eine Mindestbreite zu den Schaltflächen hinzugefügt, da ich das Aussehen einer ungleichmäßig rechtsbündigen Ansicht der Schaltflächen wegen unterschiedlicher Breiten nicht ertragen konnte :) )

Answer 3

Die Verwendung des Bootstrap pull-right Helfers hat bei uns nicht funktioniert, da er float: right verwendet, was dazu führt, dass inline-block-Elemente zu block-Elementen werden lässt. Und wenn die .btns zu block-Elementen werden, verlieren sie den natürlichen Rand, den inline-block ihnen als quasi-textuelle Elemente geboten hat.

[Also haben wir stattdessen direction: rtl; auf dem Elternelement verwendet, was bewirkt, dass der Text innerhalb dieses Elements von rechts nach links layoutet, und das führt dazu, dass auch inline-block-Elemente von rechts nach links layoutet werden. Du kannst LESS wie folgt verwenden, um zu verhindern, dass Kinder auch rtl layoutet werden:

/* Lass den inline-block .btn vom rechten Ende beginnen. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

und verwende es wie folgt:

    Klick Mich](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo)

Answer 4

Für Bootstrap 5:

Dokumentation: https://getbootstrap.com/docs/5.0/utilities/float/

Verwenden Sie .float-end im Element für die rechte Ausrichtung. Möglicherweise müssen Sie .clearfix im übergeordneten Element hinzufügen, wenn Sie z. B. einen Button nach rechts verschieben und nicht möchten, dass das folgende Element nach oben rutscht.

Answer 5

In Bootstrap 4: Probieren Sie es auf diese Weise mit Flexbox aus. Sehen Sie sich die Dokumentation unter getbootstrap an.

      Beispiel 1
      Beispiel 2