Jaki jest właściwy sposób bootstrapprzesunięcia elementu DIV w prawo? Myślałem, że pull-rightto zalecany sposób, ale nie działa.

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

Masz dwa elementy div span6 w swoim wierszu, które zajmą całe 12 przęseł, z których składa się wiersz.

Dodanie pull-right do drugiego elementu div span6 nic z tym nie zrobi, ponieważ jest on już umieszczony po prawej stronie.

Jeśli masz na myśli, że chcesz, aby tekst z drugiego span6 div był wyrównany do prawej strony, po prostu dodaj nową klasę do tego elementu div i nadaj mu wartość text-align: right np.

.myclass {
    text-align: right;
}

AKTUALIZACJA:

EricFreese zwrócił uwagę, że w wersji 2.3 Bootstrap (w zeszłym tygodniu) dodali klasy narzędziowe do wyrównywania tekstu, których można użyć:

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

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

Aby przesunąć element div w prawo, pull-rightjest zalecany sposób. Wydaje mi się, że robisz rzeczy dobrze, wystarczy tylko użyćtext-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 ma klasę do wyrównywania tekstu w elemencie div

<div class="text-right">

wyrówna tekst do prawej strony

<div class="pull-right">

przeciągnie w prawo całą zawartość, a nie tylko tekst

To załatwia sprawę, bez potrzeby dodawania stylu wbudowanego

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

Odpowiedzią jest zagnieżdżenie innego <div>z klasą „pull-right”. Połączenie tych dwóch klas nie zadziała.

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

Ta praca dla mnie.

edit: przykład z fragmentem kodu:

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

Możesz przypisać nazwę klasy, na przykład do środka tekstu, do lewej lub prawej. Tekst zostanie dopasowany do tych nazw klas. Nie musisz osobno tworzyć dodatkowej nazwy klasy. Te klasy są wbudowane w BootStrap 3 i bootstrap 4.

Bootstrap 3

v3 Dokumentacja wyrównania tekstu

<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 Dokumenty wyrównania tekstu

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