Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap

青灯夜游

Lepaskan： 2021-11-17 19:13:13

ke hadapan

7860 orang telah melayarinya

Artikel ini akan membawa anda melalui masalah pembungkusan baris dalam bootstrap reka letak grid dan melihat cara pembungkusan lajur grid saya harap ia akan membantu semua orang.

Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap

1. Soalan lazim tentang pembalut baris dalam reka letak grid

Dalam bahagian sebelumnya, kami telah memperkenalkan beberapa isu berkaitan tentang pembalut garisan grid . Pengetahuan, terdapat juga demonstrasi yang berkaitan dalam kod ini akan memisahkan pemisah baris dan menerangkannya secara terperinci, kerana jika anda tidak mahir dalam pengetahuan yang berkaitan tentang pemisah baris, ia adalah mudah untuk menyebabkan penyelewengan besar dalam reka letak halaman web. atau masalah yang tidak dapat dijelaskan. Di samping itu, apabila saya bercakap mengenainya sebelum ini, kebanyakan baris sesuai dengan sempurna, contohnya, 4 lajur dibahagikan kepada 2 baris, tetapi masalah sering berlaku apabila baris tidak penuh, seperti 3 lajur atau 5 lajur dibahagikan kepada dua baris. . Jika anda tidak memberi perhatian kepada cara baris terakhir dipaparkan, Ia mudah menjadi salah. [Cadangan berkaitan: "tutorial bootstrap"]

Soalan Lazim tentang Pembalut Garisan Grid:

Jangan putuskan garisan di tempat yang sepatutnya patah
Balut baris di tempat yang tidak sepatutnya dilakukan
Barisan terakhir pembalut perkataan automatik mengelirukan

2. Pembalut lajur

2.1 `.row-cols-*` Penggunaan

row yang kami gunakan sebelum ini adalah <div class="row"> yang mudah, sebenarnya, untuk baris, anda juga boleh menggunakan lebih lanjut kelas <code>row-cols-* untuk menetapkan yang terbaik dengan pantas Bilangan lajur yang boleh memaparkan kandungan dan reka letak. Kelas .col-* biasa digunakan pada lajur individu (cth. .col-md-4), manakala kelas row-cols-* ditetapkan pada baris .induk sebagai pintasan. Asterisk

.row-cols-* boleh ditulis dengan nombor Nombor mewakili bilangan lajur yang akan dipaparkan dalam satu baris, bukan lebar Ini tidak boleh dikelirukan dengan .col-* biasa. Anda juga boleh menggunakan .row-cols-auto untuk menyesuaikan lebar, tetapi dalam kes ini, reka letak mungkin berada di luar kawalan anda.

Kod masih digunakan untuk menunjukkan perkara berikut:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-3">
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Salin selepas log masuk

Hasilnya dipaparkan seperti berikut

Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap

Cuba tambah baris -cols-3 Tukar 3 kepada 2, 4, 5, 6, dsb. untuk melihat kesannya. Adakah anda mendapati terdapat sedikit kejutan? Dengan menetapkan kol lebar lajur- kami tidak boleh memaparkan 5 lajur dalam satu baris secara purata, tetapi kami boleh mencapainya dengan menetapkan row-cols-5.

2.2 `.row-cols--`Penggunaan

Sama seperti menetapkan lebar lajur, menetapkan bilangan baris juga menyokong reka bentuk responsif Kod berikut menunjukkan penggunaan khususnya -cols-xs- Untuk kelas seperti 1, sila gunakan row-cols-1, yang bermaksud bahawa jika ia tidak ditulis secara lalai, ia akan menjadi skrin terkecil.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
            <div>
               Bootstrap是什么？  
            </div>
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Salin selepas log masuk

Animasi kesan responsif

Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap

2.3 Pemisah garis ultra lebar

Apabila berturut-turut, setiap sel ditetapkan Nilai Lebar , apabila baki lebar berturut-turut tidak dapat dimuatkan dalam sel seterusnya, ia akan membalut secara automatik. Saya telah menerangkan dan menunjukkan bahagian ini secara terperinci dalam "Sistem Grid Susun Atur Halaman Web Bootstrap", jadi saya tidak akan pergi ke butiran di sini Jika ada apa-apa yang anda tidak faham, sila rujuk Bahagian 4.2.4.

2.4 Pembalut baris paksa

Dalam Bootstrap, pembalut baris paksa tanpa mengubah lebar setiap lajur biasanya dilakukan dengan menambah berbilang baris, tetapi kadangkala perlu memaksa pembalut baris selepas lajur tertentu berturut-turut Pada masa ini, anda boleh menggunakan helah kecil: di mana anda perlu membalut garisan, tambahkan div dengan lebar 100% dan ketinggian 0 untuk mencapai pembalut garisan paksa.

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

<!-- 此处强制换行 -->
<div class="w-100"></div>

<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Salin selepas log masuk

Asalnya dipaparkan pada satu baris, ia dipaparkan pada dua baris.

Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara membungkus lajur dalam susun atur grid Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!