Apa yang terjadi dengan kelas .pull-left dan .pull-right di Bootstrap 4?

Di versi terbaru pull-left dan pull-right telah diganti dengan .pull- {xs, sm, md, lg, xl} - {left, right, none}

Artinya, alih-alih menulis yang sederhana class="pull-right", sekarang saya harus menulisclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Apakah ada cara yang tidak terlalu membosankan untuk melakukannya?

Kembali ke tahun 2016 ketika pertanyaan ini pertama kali diajukan, jawabannya adalah:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

Tapi sekarang jawaban yang diterima seharusnya adalah Robert Went.

Kelasnya float-right float-sm-rightdll.

Kueri media mengutamakan seluler, jadi penggunaan float-sm-rightakan memengaruhi ukuran layar kecil dan apa pun yang lebih lebar, jadi tidak ada alasan untuk menambahkan kelas untuk setiap lebar. Cukup gunakan layar terkecil yang ingin Anda pengaruhi atau float-rightuntuk semua lebar layar.

Dokumen Resmi:

Kelas: https://getbootstrap.com/docs/4.4/utilities/float/

Memperbarui: https://getbootstrap.com/docs/4.4/migration/#utilities

Jika Anda memperbarui proyek yang ada berdasarkan versi Bootstrap yang lebih lama, Anda dapat menggunakan sass extended untuk menerapkan aturan ke nama kelas lama:

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

Perbarui 2018 (pada Bootstrap 4.1)

Ya, pull-leftdan pull-righttelah diganti dengan float-leftdan float-rightdi Bootstrap 4.

Namun, float tidak akan berfungsi di semua kasus karena Bootstrap 4 sekarang menjadi flexbox .

Untuk anak-anak flexbox menyelaraskan ke kanan, penggunaan auto-margin (yaitu: ml-auto) atau util flexbox (yaitu: justify-content-end, align-self-end, dll ..).

Contoh

Navs:

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

Remah roti:

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

Kisi:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

Berubah menjadi float-right float-left float-xx-leftdanfloat-xx-right

Jika Anda ingin menggunakannya dengan kolom di pekerjaan lain dengan col-*kelas, Anda dapat menggunakan order-*kelas.

Anda dapat mengontrol urutan kolom Anda dengan kelas pesanan. lihat lebih lanjut di dokumentasi Bootstrap 4

Sederhana dari dokumen bootstrap:

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Thay dihapus.

Gunakan float-leftsebagai ganti pull-left. Dan float-rightbukannya pull-right.

Periksa Dokumentasi bootstrap di sini :

Menambahkan class .float- {sm, md, lg, xl} - {left, right, none} untuk float responsif dan menghapus .pull-left dan .pull-right karena redundan ke .float-left dan .float- Baik.

Saya dapat melakukan ini dengan kelas-kelas berikut dalam proyek saya

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

Tidak ada hal lain yang berhasil untuk saya. Yang ini berhasil. Ini mungkin membantu seseorang.

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

Membungkus semuanya dalam div clearfix adalah kuncinya.

bootstrap-4 menambahkan kelas float-left atau right untuk floating

Untuk orang lain dan hanya tambahan untuk Robert, Jika nav Anda memiliki nilai tampilan fleksibel, Anda dapat mengapungkan elemen yang Anda perlukan ke kanan, dengan menambahkan ini ke cssnya

{
    margin-left: auto;
}