Bagaimana untuk Menyusun Semula Lajur Bootstrap Secara Berbeza untuk Paparan Desktop dan Mudah Alih?

Menyusun Lajur Bootstrap dalam Susunan Berbeza pada Mudah Alih

Dalam Bootstrap 4, susunan lajur boleh menjadi agak sukar untuk disesuaikan apabila bertukar antara paparan desktop dan mudah alih. Mari kita atasi senario tertentu: anda mempunyai dua lajur dan satu baris bersarang dalam lajur kanan. Matlamat anda adalah untuk menjadikan reka letak responsif supaya ia dipaparkan seperti berikut:

Versi desktop:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

Versi mudah alih (disusun mengikut susunan):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Menggunakan Terapung dan Melumpuhkan Flexbox

Lalai susun atur flexbox dalam Bootstrap 4 memastikan ketinggian yang sama untuk lajur. Untuk mencapai reka letak desktop yang diingini, anda boleh melumpuhkan flexbox untuk skrin besar dan sebaliknya menggunakan float:

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

Menggunakan Flexbox Wrapping Hack

Sebagai alternatif, anda boleh menggunakan hack wrapping flexbox yang menggunakan w-auto:

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

Pertimbangan

Kedua-dua pendekatan mempunyai kelebihan dan kekurangan tersendiri. Kaedah apungan adalah lebih mudah tetapi boleh menyebabkan masalah dengan penjajaran dan responsif. Godam pembalut memberikan respons yang lebih baik tetapi memerlukan CSS yang lebih kompleks.

Sumber Tambahan

• [Bagaimana untuk membetulkan susunan lajur yang tidak dijangka dalam bootstrap 4?](...)
• [Ketinggian Lajur Responsif Bootstrap](...)
• B-A-C -> A-B-C

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Lajur Bootstrap Secara Berbeza untuk Paparan Desktop dan Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!