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

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>

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

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.

<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/[email protected]/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>

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>