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

Question

Jakie są niektóre z typowych sposobów wyrównania tekstu i wyrównania innych elementów w kontenerze div w bootstrapie?

np.

Total cost     $42 

Przede całkowity koszt powinien być wyrównany do lewej tekst i $ 42 jest wyrównany do prawej tekst

Answer 1

2018 Aktualizacja ...

Bootstrap 4.0.0

• pull-right jest teraz float-right
• text-right jest taka sama jak 3.x i współpracuje z elementami wbudowanymi
• zarówno float-* i text-* są responsive dla różnych wyrównanie w różnych szerokościach (np: float-sm-right)

The utils flexbox (np justify-content-between) może być również wykorzystywane do wyrównania:

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

lub, automatyczne marginesy (np: ml-auto) w każdym pojemniku schematu flexbox (wiersz, navbar, karty, d-flex, etc ...)

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

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples (float, flexbox text-prawo, etc ...)

---

Bootstrap 3

użyć klasy pull-right ..

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

Bootstrap 3 Demo

Można również użyć klasy text-right takiego:

<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

Answer 2

Zamiast używać pull-right klasę, to lepiej jest użyć text-right klasę w kolumnie, ponieważ pull-right stwarza problemy czasami podczas zmiany rozmiaru strony.

Answer 3

<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 załatwić sprawę po prostu OK

Answer 4

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

Dzieje się tak, ponieważ xs oznacza najmniejszy rozmiar ekranu w BS.Jeśli chcesz, możesz zastosować wyrównanie tylko wtedy, gdy wziernik jest średni lub większy, używając text-md-right.

W najnowszej wersji alfa, text-xs-right została uproszczona do text-right.

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

Answer 5

bootstrap V4 wprowadza obsługę flexbox

<div class="d-flex justify-content-end"> 
    <div class="mr-auto p-2">Flex item</div> 
    <div class="p-2">Flex item</div> 
    <div class="p-2">Flex item</div> 
</div> 

Więcej na https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 6

Można osiągnąć Bootstrap 4 flexbox:

<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