Bootstrap'te div içinde sola hizalama ve sağa hizalama

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

Zim
Edited question 2018ösp58ös14 Ekim 2018 в 2:58
Programlama
user-interface twitter-bootstrap bootstrap-4
2013ööp40öö10 Eylül 2013 в 10:40
57 görünümler
Çözüm

2018 Güncellemesi...

Bootstrap 4.1+

  • pull-right artık float-right oldu
  • text-right` 3.x ile aynıdır ve satır içi öğeler için çalışır
  • hem float-* 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>

Bootstrap 3 Demo

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>

Bootstrap 3 Demo 2

Zim
Edited answer 2018ösp3ös12 Ağustos 2018 в 12:03
Yorumlar (2)

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.

Gargaroz
Edited answer 2015ösp44ös14 Haziran 2015 в 2:44
Yorumlar (0)
 
<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.

Mosh Feu
Edited answer 2016ööp32öö7 Mayıs 2016 в 7:32
Yorumlar (0)