Vilka är de vanligaste sätten att vänsterjustera viss text och högerjustera annan text i en div-behållare i bootstrap?
t.ex.
Total cost $42
Ovanstående totalkostnad ska vara vänsterjusterad text och $42 är högerjusterad text.
2018 Uppdatering...
Bootstrap 4.1+
pull-right
är nu float-right
.text-right
är samma som 3.x och fungerar för inline-element.float-*
och text-*
är [responsiva] (http://v4-alpha.getbootstrap.com/utilities/responsive-helpers/#responsive-floats) för olika inriktning vid olika bredder (t.ex.: float-sm-right
).Flexbox-verktygen (t.ex.: justify-content-between
) kan också användas för justering:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
eller auto-marginaler (t.ex.: ml-auto
) i alla flexbox-behållare (rad, navbar, kort, 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-right, etc...)
Bootstrap 3
Använd klassen 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] (http://bootply.com/121984)
Du kan också använda klassen text-right
så här:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
I stället för att använda klassen pull-right
är det bättre att använda klassen text-right
i kolumnen, eftersom pull-right
ibland skapar problem när du ändrar sidans storlek.
<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>
Det borde göra jobbet helt okej