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

452

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?

deltanovember
quelle
5
Warum ist diese Frage mit Twitter-Bootstrap-3 und Twitter-Bootstrap-2 sowie Twitter-Bootstrap gekennzeichnet ?
Andrew Grimm
5
Weil es für alle Versionen seit 3/2013 relevant ist
Zim

Antworten:

693

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}

Aronadaal
quelle
18
Ich verstehe diese Antwort nicht. In der Frage wird der Beispielcode bereits verwendet pull-right.
Guival
@guival Ich habe mich das Gleiche gefragt. stackoverflow.com/a/26546770/470749 impliziert, dass die Verwendung von buttonanstelle von inputeinen Unterschied macht.
Ryan
@ Ryan das funktioniert bei mir, sowohl in Eingabe als auch in Button
Lesther
@aronadaal Es ist Arbeit für mich, danke!
Houari Zegai
249

Versuchen Sie in Twitter Bootstrap 3 die Klasse Pull-Right

class="btn pull-right"
Shawn Vader
quelle
4
Nicht mehr, es war ab Version
ılǝ
9
+1 zum Hervorheben der Änderung. Diese Abschreibung gilt jedoch nur für das Dropdown-Menü, das durch .dropdown-menu-right ersetzt wurde. Es wurde nicht als Ganzes veraltet.
Shawn Vader
Sie haben Recht, die Dokumentation sagtwe've deprecated .pull-right on dropdown menus
ılǝ
3
Ich musste Pull-Right in der äußeren BTN-Gruppe Div verwenden: <div class = "BTN-Gruppe Pull-Right">
Gerfried
17
pull-rightverwendet float: right, wodurch vertikale Inhalte übereinander kollabiert werden. Wickeln Sie den Knopf mit text-rightDIV wie <div class="text-right">button...</div>
folgt ein
137

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>

César León
quelle
6
Ich denke, dies ist besser als Pull-Right, da es verhindert, dass der vertikale Inhalt übereinander kollabiert, und vermieden wird, dass mehr Markups hinzugefügt werden müssen, um dies zu umgehen.
Tony Wall
2
Vielen Dank. Das Problem mit "Pull-Right" ist, dass alle Ränder von den Schaltflächen entfernt werden. Dadurch bleiben die Ränder erhalten, die Elemente werden jedoch nach rechts verschoben. Perfekt!
PR Whitehead
Warum muss text-right in div sein, das diese Schaltfläche enthält, anstatt nur class="btn btn-default text-right"in der Schaltfläche ???
Krystian Polska
50

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.

Zim
quelle
Sie arbeiten für mich, aber Sie sollten sich nicht auf die Links verlassen müssen. Lesen Sie die Antwort, um eine Erklärung zum richtigen Ausrichten zu erhalten.
Zim
19

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; }
Shehzad Mehmood
quelle
18

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>
Yuvilio
quelle
12

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

Allan Nienhuis
quelle
11

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>
Carl G.
quelle
7

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>
Shahriyar Ahmed
quelle
3

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

Dan Ochiana
quelle
2

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!

OmniPotens
quelle
5
Keine Notwendigkeit für benutzerdefinierte CSS, da die andere Antwort zeigt, dass alles, was benötigt wird, im Bootstrap enthalten ist
Chrisweb
@chrisweb Was tun Sie, wenn Sie andere Plugins haben, die dieselbe Ihnen unbekannte CSS-Klasse und widersprüchliche Probleme verwenden? Sitzen und zuschauen, als ein benutzerdefiniertes CSS zu erstellen und fortzufahren? Das OP hat nie angegeben, ob andere Plugins hinzugefügt wurden, die möglicherweise dieselben CSS-Klassen verwenden.
OmniPotens
2
<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;
}
sasi
quelle
Für mich bedeutet dies, dass beide Listenelemente in einer einzigen Zeile stehen
am
2

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

user889030
quelle
1

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.

Uri Lukach
quelle
-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>
Volodymyr Petlovy
quelle
Was hat das mit Rechtsausrichtung und Schaltflächen zu tun?
Zim