Wyrównanie do lewej i wyrównanie do prawej w div w Bootstrap


268

Jakie są niektóre z typowych sposobów wyrównywania do lewej części tekstu, a do prawej wyrównywania innego tekstu w kontenerze div w programie ładującym?

na przykład

Total cost                   $42

Powyżej całkowitego kosztu powinien być tekst wyrównany do lewej, a 42 USD to tekst wyrównany do prawej

Odpowiedzi:


610

Aktualizacja 2018 ...

Bootstrap 4.1+

  • pull-right jest teraz float-right
  • text-right jest taki sam jak 3.x i działa dla elementów wbudowanych
  • zarówno float-*i text-*czułe na innym ustawieniu na różnych szerokościach (tj float-sm-right)

Narzędzia Flexbox (np .:) justify-content-betweenmożna również użyć do wyrównania:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

lub automatyczne marginesy (np . ml-auto:) w dowolnym kontenerze Flexbox (wiersz, pasek nawigacyjny, karta, d-flex itp.)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Przykłady (float, flexbox, text-right itp.)


Bootstrap 3

Skorzystaj z pull-rightklasy ..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Wersja demonstracyjna Bootstrap 3

Możesz także użyć tej text-rightklasy:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2


2
Dla Bootstrap 3, dla kolumny, text-rightdziałał dla mnie.
Florin Vîrdol,

60

Zamiast używać pull-rightklasy, lepiej jest użyć text-rightklasy w kolumnie, ponieważ pull-rightczasami powoduje problemy podczas zmiany rozmiaru strony.


16

W Bootstrap 4 poprawną odpowiedzią jest użycie text-xs-rightklasy.

Działa to, ponieważ xs oznacza najmniejszy rozmiar rzutni w BS. Jeśli chcesz, możesz zastosować wyrównanie tylko wtedy, gdy rzutnia jest średnia lub większa przy użyciu text-md-right.

W najnowszej wersji alfa text-xs-rightzostał uproszczony do text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>


6

Bootstrap 4 Flexbox możemy osiągnąć:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Przykład: JSFiddle


1
<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

To powinno dobrze wykonać zadanie

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.