Twitter Bootstrap Float Div rechts


142

Was ist der richtige Weg bootstrap, um ein Div nach rechts zu schweben? Ich dachte, pull-rightdas wäre der empfohlene Weg, aber es funktioniert nicht.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>


Sie möchten Text schweben lassen? Schauen Sie sich CSStext-align
Ron van der Heijden

Gibt es nicht einen eingebauten (Standard-) Weg in Bootstrap?
Justin

Antworten:


85

Sie haben zwei span6-Divs in Ihrer Zeile, sodass die gesamten 12 Bereiche, aus denen eine Zeile besteht, belegt werden.

Das Hinzufügen von Pull-Right zum zweiten span6-Div wird nichts dagegen tun, da es bereits rechts sitzt.

Wenn Sie meinen, dass der Text im zweiten span6-Div nach rechts ausgerichtet werden soll, fügen Sie diesem Div einfach eine neue Klasse hinzu und geben Sie ihm den Text-Align: Right-Wert, z

.myclass {
    text-align: right;
}

AKTUALISIEREN:

EricFreese wies darauf hin, dass in der Version 2.3 von Bootstrap (letzte Woche) Dienstprogrammklassen für die Textausrichtung hinzugefügt wurden, die Sie verwenden können:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography


5
Sieht aus wie sie Utility - Klassen zum Ausrichten von Text in hinzugefügt 2.3 : .text-left, .text-centerund.text-right
Eric Freese

1
@EricFreese - Sie haben Recht - hatten dieses Update nicht bemerkt - ich habe meine Antwort aktualisiert.
Billy Moat

Dies sollte nicht die akzeptierte Antwort sein. Es gibt eine eingebaute Bootstrap-Klasse namens pull-right(Gutschrift auf @Amit); IMO, es ist sauberer, eine eingebaute Bootstrap-Klasse zu verwenden ... und OP hat in seiner Frage danach gefragt
Kolob Canyon

107

Ein Div nach rechts zu schweben pull-rightist die empfohlene Methode. Ich glaube, Sie machen die Dinge richtig, möglicherweise müssen Sie sie nur verwendentext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

Leider pull-rightwurde mit Version 3.1 veraltet: getbootstrap.com/components/#dropdowns-alignment
ılǝ

12
@ ılǝ "..wir haben .pull-right in Dropdown-Menüs veraltet ." Dies gilt nicht für andere Pull-Right-Verwendungen.
user2864740

78

Bootstrap 3 hat eine Klasse, um den Text innerhalb eines Div auszurichten

<div class="text-right">

richtet den Text rechts aus

<div class="pull-right">

wird den gesamten Inhalt nach rechts ziehen, nicht nur den Text


text-right, text-leftUnd text-centerfunktioniert perfekt. Und richtet den Text entsprechend am Container aus.
Anish Nair

danke @BojanKogoj, tatsächlich war Pull-Right für Dropdown-Menüs in Version 3.1 veraltet: getbootstrap.com/components/#dropdowns-alignment
ılǝ

27

Dies macht den Trick, ohne dass ein Inline-Stil hinzugefügt werden muss

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Die Antwort besteht darin, eine andere <div>mit der "Pull-Right" -Klasse zu verschachteln . Das Kombinieren der beiden Klassen funktioniert nicht.


1
Dies sollte die richtige Antwort sein. Bei Bootstrap geht es darum, nicht direkt mit Stilen umgehen zu müssen.
Kristen Waite

18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Diese Arbeit für mich.

edit: Ein Beispiel mit deinem Snippet:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>


3

Sie können den Klassennamen wie Textmitte, links oder rechts zuweisen. Der Text wird entsprechend diesem Klassennamen ausgerichtet. Sie müssen keinen zusätzlichen Klassennamen separat festlegen. Diese Klassen sind in BootStrap 3 und Bootstrap 4 integriert.

Bootstrap 3

v3 Textausrichtungsdokumente

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4 Textausrichtungsdokumente

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.