Wie kann ich meine Twitter Bootstrap-Schaltflächen richtig ausrichten?

Ich habe hier eine einfache Demo:

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>

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?

Legen Sie pull-rightin 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-rightBefehl wurde entfernt und durch float-rightoder allgemein ersetztfloat-{sm,md,lg,xl}-{left,right,none}

Versuchen Sie in Twitter Bootstrap 3 die Klasse Pull-Right

class="btn pull-right"

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:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Update 2019 - Bootstrap 4.0.0

Die pull-rightKlasse ist jetzt float-rightin 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

Es ist auch besser, die ul-Liste nicht auszurichten und Blockelemente für die Zeilen zu verwenden.

Funktioniert float-rightimmer noch nicht?

Denken Sie daran, dass Bootstrap 4 jetzt Flexbox ist und viele Elemente display:flexverhindern, dass Float-Right funktioniert. In einigen Fällen mögen align-self-endoder ml-autoarbeiten 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-rightauch bei Inline-Elementen funktioniert.

Bootstrap 4 richtet die richtigen Beispiele aus

Bootstrap 3

Verwenden Sie die pull-rightKlasse.

Verwenden Sie buttontag anstelle von inputund verwenden Sie pull-rightclass.

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.

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

Verwenden Sie dann das folgende CSS für die Klasse

.RbtnMargin { margin-left: 5px; }

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.

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

Alternativ können Sie alle Ihre Spalten zu Ihrer Gesamtzahl der Rasterspalten (standardmäßig 12) addieren und die erste Spalte versetzen lassen.

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

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.

1. Die URL zur Datei bootstrap.css ist ungültig. (Vielleicht hat es funktioniert, als Sie die Frage gestellt haben).
2. Sie sollten Ihrem Eingabeelement das Attribut type = "button" hinzufügen, da es sonst nicht als Schaltfläche gerendert wird, sondern als Eingabefeld. Besser noch, verwenden Sie <button>stattdessen das Element.
3. Da Pull-Right Floats verwendet, wird das Tastenlayout zusätzlich gestaffelt, da nicht jeder LI über eine ausreichende Höhe verfügt, um die Höhe der Taste aufzunehmen. Das Hinzufügen von CSS mit Zeilenhöhe oder Mindesthöhe zum LI würde dies beheben.

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

(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 :))

Die Verwendung des Bootstrap- pull-rightHilfsprogramms hat bei uns nicht funktioniert, da er verwendet wird float: right, wodurch Elemente gezwungen inline-blockwerden, zu werdenblock . Und wenn die .btns werden block, verlieren sie den natürlichen Spielraum, inline-blockder 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 die inline-blockElemente auch von rechts nach links angeordnet werden. Sie können WENIGER wie folgt verwenden, um zu verhindern, dass auch Kinder ausgelegt werden rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

und benutze es wie:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

In Bootstrap 4 : Versuchen Sie dies auf diese Weise mit Flexbox. Siehe Dokumentation in 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>

Nach rechts ziehen wurde ab Version 3.1.0 abgeschrieben. Nur ein Kopf hoch.

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

pull-rightKlasse für die Schaltfläche anwenden . http://getbootstrap.com/css/#helper-classes-floats -> Hilfsklassen

Dieser Link wird helfen

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

Können Sie ein benutzerdefiniertes CSS neben dem Bootstrap-CSS ausprobieren, um festzustellen, ob Änderungen vorliegen? Versuchen

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

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!

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

Ich habe gerade Layout verwendet. Stile für Li anwenden.

oder

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

in CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Sie können auch leere Spalten verwenden, um links Leerzeichen zu setzen

mögen

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

Demo :: Jsfiddle Demo

Ab Bootstrap V3.3.1 wird dieses Problem durch den folgenden CSS-Stil behoben

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

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.

für die Bootstrap 4- Dokumentation

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>