Bagaimana untuk Menyusun Semula Bootstrap 4 Divs: Bersebelahan pada Desktop, Bertindan pada Mudah Alih?

Menyusun Semula Div dengan Bootstrap 4: Div Tinggi Bersebelahan dengan Div Lebih Pendek pada Desktop dan Ditindan pada Mudah Alih

Anda berhasrat untuk menyusun semula tiga div pada halaman web, memaparkannya bersebelahan pada peranti desktop dan disusun pada mudah alih peranti.

Untuk mencapai ini, anda perlu mengatasi gelagat flexbox Bootstrap 4, yang menyebabkan lajur mempunyai ketinggian yang sama. Untuk lebar yang lebih besar, anda harus melumpuhkan flexbox. Kemudian, anda boleh menggunakan apungan untuk memastikan lajur kedua dan ketiga (B dan C) terapung secara semula jadi ke kanan, memandangkan lajur pertama (A) lebih tinggi.

Untuk melengkapkan penyusunan semula pada peranti mudah alih, gunakan harta flexbox order-. Ini akan memastikan bahawa lajur muncul dalam susunan yang diingini.

Coretan Kod:

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Dalam contoh ini, kelas CSS tertib-1 dan float-left memastikan susunan yang dikehendaki pada peranti desktop. Pada peranti mudah alih, kelas d-flex dilumpuhkan, membenarkan tiga div disusun secara menegak.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Bootstrap 4 Divs: Bersebelahan pada Desktop, Bertindan pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!