Bootstrap'te bir div konteyneri içinde bazı metinleri sola hizalamanın ve diğer bazı metinleri sağa hizalamanın yaygın yollarından bazıları nelerdir?
Örneğin.
Total cost $42
Yukarıdaki toplam maliyet sola hizalı metin ve 42 $ sağa hizalı metin olmalıdır
2018 Güncellemesi...
Bootstrap 4.1+
pull-right
artık float-right
oldufloat-*
hem de text-*
farklı genişliklerde farklı hizalama için responsive (yani: float-sm-right
)Hizalama için flexbox yardımcı programları (örn:justify-content-between
) da kullanılabilir:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
veya herhangi bir flexbox konteynerinde (satır, navbar, kart, d-flex, vb...) otomatik kenar boşlukları (örn:ml-auto
)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Sağa Hizalama Örnekleri(float, flexbox, text-right, vb...)
Bootstrap 3
"sağa çek" sınıfını kullanın...
<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>
Bunun gibi text-right
sınıfını da kullanabilirsiniz:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Sütunda pull-right
sınıfını kullanmak yerine text-right
sınıfını kullanmak daha iyidir, çünkü pull-right
bazen sayfayı yeniden boyutlandırırken sorun yaratır.
<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>
Bu işinizi görür.