it-swarm.com.de

Wie kann ich meine Twitter-Bootstrap-Buttons 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 Text auf der linken Seite und dann eine rechtsbündige Schaltfläche. Ich habe versucht, Pull-Right zu verwenden, aber die Ausrichtung wird dadurch völlig durcheinander gebracht. Was mache ich falsch?

413
deltanovember

Fügen Sie pull-right in das Klassenattribut ein und lassen Sie die Knöpfe von bootstrap 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 generell in float-{sm,md,lg,xl}-{left,right,none} ersetzt.

621
aronadaal

In Twitter Bootstrap 3 versuchen Sie die Klasse Pull-Right

class="btn pull-right"
246
Shawn Vader

"Pull-Right" -Klasse ist möglicherweise nicht der richtige Weg, da in "Float: Right" anstelle von Textausrichtung verwendet wird.

Bei der Überprüfung der Bootstrap 3-CSS-Datei fand ich in Zeile 457 die Klasse "text-right". 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>

125
César León

Update 2018 - Bootstrap 4.0.0

Die pull-right-Klasse ist jetzt float-right in 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-right noch nicht?

Denken Sie daran, dass Bootstrap 4 jetzt flexbox ist und viele Elemente display:flex sind, die das Funktionieren von Float-Right verhindern können. In einigen Fällen arbeiten die util-Klassen wie align-self-end oder ml-auto, um Elemente, die sich in einem Flexbox-Container befinden, wie Bootstrap 4 .row, Card oder Nav, rechts auszurichten.

Denken Sie auch daran, dass text-right noch für Inline-Elemente funktioniert.

Bootstrap 4 Beispiele rechts ausrichten


Bootstrap 3

Verwenden Sie die Klasse pull-right.

34
Zim

Verwenden Sie den Tag button anstelle von input und die Klasse pull-right.

Die pull-right-Klasse führt zu einer vollständigen Verwirrung Ihrer beiden Schaltflächen. Sie können dies jedoch 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 die folgende CSS für die Klasse

.RbtnMargin { margin-left: 5px; }
19
Shehzad Mehmood

Wenn ich mit Containern und Spalten arbeite, die in Bootstrap eingebettet sind, habe ich manchmal eine voll gestreckte Spalte mit einem untergeordneten div, das das Ziehen zum Ziel hat.

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

Lassen Sie alternativ alle Ihre Spalten die Gesamtzahl der Rasterspalten (standardmäßig 12) addieren, wobei die erste Spalte versetzt wird.

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

Es tut mir leid, dass Sie auf eine ältere, bereits beantwortete Frage geantwortet haben, aber ich dachte, ich würde ein paar Gründe dafür nennen, dass Ihr jsfiddle nicht funktioniert, falls andere es prüfen und sich fragen, warum die Pull-Right-Klasse, wie in der akzeptierten Antwort beschrieben, dies nicht tut dort nicht arbeiten 

  1. die URL der Datei bootstrap.css ist ungültig. (Vielleicht hat es funktioniert, als du die Frage gestellt hast).
  2. sie sollten das Attribut: type = "button" zu Ihrem Eingabeelement hinzufügen. Andernfalls wird es nicht als Schaltfläche dargestellt - es wird als Eingabefeld dargestellt. Besser noch, verwenden Sie stattdessen das <button>-Element.
  3. Da Pull-Right Floats verwendet, wird das Tastenlayout zusätzlich gestaffelt, da jede LI nicht genügend Höhe hat, um die Höhe der Schaltfläche unterzubringen. Das Hinzufügen von Zeilenhöhen- oder Min-Höhen-Css zum LI würde dies beheben.

geige arbeiten: 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 Knöpfen auch eine Min-Breite hinzugefügt, da ich das Aussehen eines ungerundeten, rechtsbündigen Blicks wegen der unterschiedlichen Breiten nicht aushalten konnte :))

12
Allan Nienhuis

Die Verwendung des Bootstrap pull-right-Helpers hat für uns nicht funktioniert, da er float: right verwendet, wodurch inline-block-ELEMENTE ZU block werden. Und wenn aus .btns block wird, verlieren sie den natürlichen Spielraum, den inline-block als quasi-textuelle Elemente bereitstellt.

Stattdessen haben wir direction: rtl; für das übergeordnete Element verwendet, wodurch der Text in diesem Element von rechts nach links angeordnet wird und inline-block-Elemente ebenfalls von rechts nach links angeordnet werden. Sie können LESS wie folgt verwenden, um zu verhindern, dass auch Kinder rtl angeordnet werden:

/* 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>
10
Carl G

Übernehmen Sie pull-right-Klasse für die Schaltfläche . http://getbootstrap.com/css/#helper-classes-floats -> Hilfsklassen

Dieser Link wird helfen

4

Pull right wurde ab v3.1.0 ..__ abgeschrieben. Nur ein Heads-up.

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

3
n1nja

sie können auch leere Spalten verwenden, um Leerzeichen auf der linken Seite anzugeben 

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

2
user889030
<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..apply Styles 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;
}
2
sasi

Können Sie ein benutzerdefiniertes CSS neben dem Bootstrap-CSS ausprobieren, um zu sehen, ob sich Änderungen ergeben. Versuchen

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

Wenn es funktioniert, können Sie versuchen, das zu ändern, was Sie haben, oder andere Formatierungen hinzuzufügen und das zu erreichen, was Sie wünschen. Da Sie bootstrap verwenden, bedeutet das nicht, dass Sie nicht das bieten, was Sie möchten, und Sie können es einfach verwalten. Sie arbeiten mit Ihren Codes und befehlen, dass Sie tun, was Sie sagen. Prost!

2
OmniPotens

Jetzt müssen Sie dem vorhandenen Element das Dropdown-Menü hinzufügen. Pull-Right wird nicht mehr unterstützt. Mehr Infos hier http://getbootstrap.com/components/#btn-dropdowns

2
Dan Ochiana

In Bootstrap 4: Versuchen Sie es 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>
0
Shahriyar Ahmed

Ab Bootstrap V3.3.1 wird der folgende CSS-Stil dieses Problem lösen

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

Hinweis: Ich habe alle Vorschläge in den obigen Beiträgen ausprobiert und alle älteren Versionen angesprochen und keine Fixe für newset-Bootstrap-Versionen bereitgestellt. 

0
Uri Lukach