Wie kann ich meine Twitter-Bootstrap-Schaltflächen rechtsbündig ausrichten?

Habe ich eine einfache demo hier:

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

Habe ich eine ungeordnete Liste und für jede Liste möchte ich auf den text auf der linken Seite und dann rechts ausgerichtet-Taste. Ich habe versucht, verwenden Sie pull-richtig, aber diese völlig vermasselt die Ausrichtung. Was mache ich falsch?

InformationsquelleAutor der Frage deltanovember | 2013-03-16

552

Einfügen pull-right in das class-Attribut und lassen bootstrap ordnen Sie die Schaltflächen.

Für Bootstrap 2.3 finden Sie unter: http://getbootstrap.com/2.3.2/components.html#misc > Helper-Klassen > .pull-rechts.

Für Bootstrap 3 finden Sie unter: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper-Klassen.

Für Bootstrap-4 finden Sie unter: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

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

InformationsquelleAutor der Antwort aronadaal
237

In twitter bootstrap 3 versuchen die Klasse ziehen-rechts
```
class="btn pull-right"
```
InformationsquelleAutor der Antwort Shawn Vader
111

"pull-right" - Klasse kann nicht der richtige Weg sein, weil in verwendet "float: right" anstelle von text-align.

Überprüfung der bootstrap 3 css Datei fand ich "text-rechts" - Klasse auf der Linie 457. Diese Klasse sollte der richtige Weg sein, richten Sie den text auf der rechten Seite.

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>
```
InformationsquelleAutor der Antwort César León
25

Update 2018 - Bootstrap-4.0.0

Den pull-right Klasse ist jetzt float-right in der 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

Ist es auch besser, nicht richten Sie die ul-Liste und verwenden Sie block-Elemente für die Zeilen.

Ist float-right immer noch nicht funktioniert?

Denken Sie daran, dass Bootstrap-4 ist nun flexboxund viele Elemente sind display:flex kann verhindern, dass der float-right arbeiten. In einigen Fällen, die util-Klassen wie align-self-end oder ml-auto Arbeit nach rechts ausrichten Elemente in einer flexbox-container wie ein Bootstrap 4 .Zeile, Karte oder Nav.

Denken Sie auch daran, dass text-right funktioniert immer noch auf inline-Elemente.

Bootstrap-4 Rechtsbündig Beispiele

Bootstrap 3

Verwenden Sie die pull-right Klasse.

InformationsquelleAutor der Antwort ZimSystem
18

Verwenden button - tag statt input und verwenden pull-right Klasse.

pull-right Klasse völlig Durcheinander bringt beide Tasten, aber Sie können dieses Problem beheben, indem Sie die Definition von benutzerdefinierten Rand auf der rechten Seite.
```
<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>
```
Dann verwenden Sie den folgenden CSS-Code für die Klasse
```
.RbtnMargin { margin-left: 5px; }
```
InformationsquelleAutor der Antwort Shehzad Mehmood

Hinzufügen, um die akzeptierte Antwort, die beim arbeiten in Behältern und Spalten, die eingebaute Polsterung aus bootstrap, manchmal habe ich eine volle gedehnte Spalte mit einem div Kind, das das ziehen an der Weg zu gehen.

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

Abwechselnd alle Spalten summieren sich zu der Gesamt-Anzahl der grid-Spalten (12 ist Standard) zusammen mit der ersten Säule ausgeglichen werden.

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

InformationsquelleAutor der Antwort yuvilio

11

Sorry für die Antwort auf eine ältere, bereits beantworteten Frage, aber ich dachte, ich würde ein paar Gründe, die deinen jsfiddle nicht funktionieren, im anderen Fall überprüfen Sie es heraus und Frage mich, warum der pull-richtig Klasse, wie beschrieben, in der akzeptierten Antwort, funktioniert dort nicht.
1. die url zu der bootstrap.css-Datei ist ungültig. (vielleicht klappte es, wenn Sie die Frage gestellt hat).
2. sollten Sie fügen Sie das Attribut type="button", um Ihre input-element, oder es wird nicht gerendert werden, wie eine Schaltfläche - es wird gerendert, wenn ein Eingabe-Feld. Besser noch, verwenden Sie die <button> element statt.
3. Zusätzlich, weil pull-rechten verwendet schwimmt, erhalten Sie eine Staffelung der button-layout, da jeder LI nicht genug Höhe, um Platz für die Höhe der Schaltfläche. Hinzufügen einige line-height oder min-height css die LI Adresse wäre.
arbeiten fiddle: 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 auch eine min-width für die buttons, wie ich konnte es nicht ertragen, das Aussehen einer zerlumpten Rechtsbündig Blick auf die Tasten, wegen der unterschiedlichen breiten 🙂 )

InformationsquelleAutor der Antwort Allan Nienhuis
8

Verwendung der Bootstrap pull-right Helfer hat nicht funktioniert für uns, weil es verwendet float: rightdie Kräfte inline-block - Elemente block. Und wenn die .btns geworden block verlieren Sie das Natürliche Marge, die inline-block war Ihnen, als quasi-Text-Elemente.

Also wir haben stattdessen verwendet direction: rtl; auf das übergeordnete element, die bewirkt, dass der text innerhalb dieses Elements zu layout von rechts nach Links, und das führt zu inline-block Elemente zu layout von rechts nach Links zu. Sie können WENIGER wie die folgende, um zu verhindern, dass die Kinder, legte sich rtl zu:
```
/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}
```
und verwenden Sie es wie:
```
<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>
```
InformationsquelleAutor der Antwort Carl G
3

Gelten pull-right Klasse für die Schaltfläche.
http://getbootstrap.com/css/#helper-classes-floats -> Helper-Klassen

Dieser link wird helfen,

InformationsquelleAutor der Antwort Abhijit Kulkarni
2

Ziehen rechts wurde abgeschrieben als der v3.1.0 .
Nur ein heads-up.

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

InformationsquelleAutor der Antwort n1nja
1

Können Sie versuchen, eine benutzerdefinierte CSS-Datei neben der bootstrap-CSS zu sehen, ob irgendwelche änderungen. Versuchen
```
.move-rigth{
    display: block;
    float: right;
}
```
Wenn es funktioniert, dann kann man versuchen zu manipulieren, was Sie haben oder andere Formatierungen hinzufügen, um dies und das zu erreichen, was Sie sich wünschen. Weil Sie mit bootstrap bedeutet nicht, dass, wenn Sie nicht bieten Ihnen, was Sie wollen, dann kann Sie nur verwalten. Sie arbeiten mit Ihren codes-und damit Sie-Befehl, es zu tun, wie Sie sagen.
Prost!

InformationsquelleAutor der Antwort OmniPotens

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

habe ich nur verwendet, layout..anwenden von Formatvorlagen für li..

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

InformationsquelleAutor der Antwort sasi

1

Nun müssen Sie hinzufügen .dropdown-Menü rechts, um das bestehende .dropdown-Menü element. pull-Recht wird nicht mehr unterstützt. Mehr info hier http://getbootstrap.com/components/#btn-dropdowns

InformationsquelleAutor der Antwort Dan Ochiana

können Sie auch leere Spalten zu geben, die Räume auf der linken

wie

<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

InformationsquelleAutor der Antwort user889030

-1

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>

InformationsquelleAutor der Antwort Volodymyr Petlovy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.