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
2018 Update...
Bootstrap 4.1+
pull-right
sekarang float-right
text-benar
adalah sama dengan 3.x, dan bekerja untuk inline elemenfloat-*
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>
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>
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.
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>
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/
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]
<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