Bootstrap'ta div içinde sola hizala ve sağa hizala

Bazı metinleri sola hizalamanın ve diğer bazı metinleri bootstrap'ta bir div kapsayıcısında sağa hizalamanın yaygın yollarından bazıları nelerdir?

Örneğin

Total cost                   $42

Toplam maliyetin üstünde sola hizalı metin ve $ 42 sağa hizalı metin olmalıdır

2018 Güncellemesi ...

Bootstrap 4.1+

• pull-right şimdi float-right
• text-right 3.x ile aynıdır ve satır içi öğeler için çalışır
• her ikisi de float-*ve text-*vardır duyarlı genişlikleri farklı farklı hizalama için (yani float-sm-right)

Esnek kutu araçları (örn .:) justify-content-betweenhizalama için de kullanılabilir:

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

veya ml-autoherhangi bir esnek kutu kapsayıcısında (satır, gezinme çubuğu, kart, d-flex vb.) otomatik kenar boşlukları (ör .)

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

Bootstrap 4 Align Demo
Bootstrap 4 Sağa Hizala Örnekleri (float, flexbox, metin-sağ, vb ...)

Önyükleme 3

pull-rightSınıfı 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 Demosu

text-rightSınıfı şu şekilde de 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

pull-rightSınıf kullanmak yerine text-right, sütunda sınıf kullanmak daha iyidir , çünkü pull-rightbazen sayfayı yeniden boyutlandırırken bazen sorunlar yaratır.

Bootstrap 4'te doğru cevap text-xs-rightsınıfı kullanmaktır .

Çünkü xsBS'deki en küçük görüntü alanı boyutunu belirtir. İsterseniz, hizalamayı yalnızca görünüm penceresi orta veya daha büyük olduğunda kullanarak uygulayabilirsiniz text-md-right.

Son alfada, text-xs-rightbasitleştirildi text-right.

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

Bootstrap v4 esnek kutu desteği sunuyor

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

Https://v4-alpha.getbootstrap.com/utilities/flexbox/ adresinde daha fazla bilgi edinin.

Bootstrap 4 Flexbox ile başarabiliriz:

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

Örnek: JSFiddle

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

İşi iyi yapmalı