Rata kiri dan rata kanan berada div di Bootstrap

Apa adalah beberapa cara umum untuk menyelaraskan kiri beberapa teks dan menyelaraskan tepat beberapa teks lain dalam satu wadah div di bootstrap?

misalnya

Total cost                   $42

Di atas total biaya yang harus rata kiri teks dan $42 adalah benar selaras teks

Zim
Pertanyaan edit 23 Oktober 2018 в 2:58
Pemrograman
user-interface twitter-bootstrap bootstrap-4
7 September 2013 в 10:40
738 tayangan
Larutan

2018 Update...

Bootstrap 4.1+

  • pull-right sekarang float-right
  • text-benar adalah sama dengan 3.x, dan bekerja untuk inline elemen
  • kedua float-* dan teks-* adalah responsif untuk keselarasan yang berbeda pada lebar yang berbeda (yaitu: float-sm-benar)

Flexbox utils (misalnya:membenarkan-konten-antara) juga dapat digunakan untuk penyelarasan:

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

atau, auto-margin (misalnya:ml-auto) di setiap flexbox wadah (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 Menyelaraskan Tepat Contoh(float, flexbox, teks-kanan, dll...)

Bootstrap 3

Gunakan pull-right kelas..

<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

Anda juga dapat menggunakan text-benar kelas 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
Jawaban edit 17 Agustus 2018 в 12:03
Komentar (2)

Alih-alih menggunakan pull-right kelas, itu adalah lebih baik untuk menggunakan text-benar kelas dalam kolom, karena pull-right kadang-kadang menciptakan masalah saat mengubah ukuran halaman.

Gargaroz
Jawaban edit 22 Juni 2015 в 2:44
Komentar (0)
<menyerang>Di Bootstrap 4 jawaban yang benar adalah dengan menggunakan `text-xs-benar` kelas.

Ini bekerja karena xs menunjukkan terkecil ukuran viewport di BS. Jika anda ingin, anda bisa menerapkan keselarasan hanya ketika viewport menengah atau besar dengan menggunakan text-md-kanan.</strike>

Di alpha terbaru, text-xs-benar telah disederhanakan untuk text-kanan.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>
Erik Berkun-Drevnig
Jawaban edit 8 Januari 2017 в 8:58
Komentar (0)

Bootstrap v4 memperkenalkan flexbox dukungan

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

Komentar (0)

Kita dapat mencapai 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][1]

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

Yang harus melakukan pekerjaan hanya ok

Mosh Feu
Jawaban edit 3 Mei 2016 в 7:32
Komentar (0)