Rata kiri dan kanan rata dalam div di Bootstrap

Apa sajakah cara umum untuk menyelaraskan kiri beberapa teks dan kanan menyelaraskan beberapa teks lain dalam wadah div di bootstrap?

misalnya

Total cost                   $42

Di atas total biaya harus teks rata kiri dan $ 42 adalah teks kanan kanan

Perbarui 2018 ...

Bootstrap 4.1+

• pull-right sekarang float-right
• text-right sama dengan 3.x, dan berfungsi untuk elemen sebaris
• baik float-*dan text-*yang responsif untuk penyelarasan yang berbeda pada lebar yang berbeda (yaitu: float-sm-right)

Utilitas flexbox (misalnya:) justify-content-betweenjuga dapat digunakan untuk penyelarasan:

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

atau, margin otomatis (mis . ml-auto:) dalam wadah flexbox (baris, navbar, kartu, d-flex, dll.)

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

Bootstrap 4 Align Demo
Bootstrap 4 Contoh Align Kanan (float, flexbox, teks-kanan, dll ...)

Bootstrap 3

Gunakan pull-rightkelas ..

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

Demo Bootstrap 3

Anda juga dapat menggunakan text-rightkelas seperti ini:

  <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

Alih-alih menggunakan pull-rightkelas, lebih baik menggunakan text-rightkelas di kolom, karena pull-rightterkadang membuat masalah saat mengubah ukuran halaman.

Di Bootstrap 4 jawaban yang benar adalah dengan menggunakan text-xs-rightkelas.

Ini berfungsi karena xsmenunjukkan ukuran viewport terkecil di BS. Jika Anda mau, Anda bisa menerapkan perataan hanya ketika viewport sedang atau lebih besar dengan menggunakan text-md-right.

Dalam alpha terbaru, text-xs-righttelah disederhanakan menjadi 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 memperkenalkan dukungan 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>

Pelajari lebih lanjut di https://v4-alpha.getbootstrap.com/utilities/flexbox/

Kita dapat mencapainya dengan 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%

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

Yang seharusnya melakukan pekerjaan itu ok