Rata kiri dan kanan rata dalam div di Bootstrap

268

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

pengguna462455
sumber

Jawaban:

611

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

Zim
sumber
2
Untuk Bootstrap 3, untuk kolom, text-rightberhasil untuk saya.
Florin Vîrdol
60

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

Arun Agarwal
sumber
17

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>
Erik Berkun-Drevnig
sumber
11

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/

William Entriken
sumber
6

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

Pradeep Kumar
sumber
1
<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

Terrymight
sumber