Bagaimana untuk Menyusun Satu Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Susun Div pada Mudah Alih Menggunakan Bootstrap 4?

Satu Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Ditindan pada Mudah Alih dengan Bootstrap 4

Memahami Masalah:

Sama seperti soalan yang dirujuk, senario ini melibatkan penyusunan semula tiga div apabila bertukar daripada desktop kepada mudah alih. Pada desktop, div ini harus disusun bersebelahan, manakala pada mudah alih, ia harus disusun secara menegak. Imej yang disediakan dengan jelas menggambarkan reka letak yang diingini.

Mengatasi Penyelesaian:

Untuk mencapai reka letak ini, kami mesti melumpuhkan gelagat flexbox lalai Bootstrap 4 untuk lebar yang lebih besar. Dengan berbuat demikian, lajur tidak akan dikekang ketinggiannya lagi. Sebaliknya, kita boleh menggunakan sifat apungan untuk menjajarkan lajur B dan C secara semula jadi ke kanan memandangkan A lebih tinggi.

Melaksanakan Perintah:

Untuk menyusun semula lajur pada mudah alih, kami menggunakan kelas utiliti pesanan yang disediakan oleh Bootstrap 4:

• Desktop (lebar lebih besar): A-B-C
• Mudah alih: B-A-C

Berikut ialah coretan yang melaksanakan pendekatan ini:

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

Penyelesaian ini menyusun semula div secara berkesan seperti yang dimaksudkan, menawarkan reka letak khusus pada kedua-dua desktop dan peranti mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Satu Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Susun Div pada Mudah Alih Menggunakan Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!