Bagaimana senarai bootstrap disusun secara menegak?

Bootstrap itu sendiri tidak menyediakan fungsi penyenaraian menegak langsung, dan perlu dilaksanakan dengan bijak menggunakan mekanisme: Flexbox: Tambah kelas "D-Flex Flex-Column" ke bekas senarai induk untuk mengatur item senarai secara menegak. Digabungkan dengan sistem raster: Tetapkan lebar lajur untuk item senarai yang mengandungi kandungan kompleks, dan mengawal susun atur dengan lebih halus. Berhati -hati untuk menggunakan kelas Raster Core "Row" dan "Col" Bootstrap untuk mengelakkan menggunakan kaedah terapung atau kedudukan.

Senarai bootstrap diatur secara menegak? Soalan ini indah. Nampaknya mudah, tetapi ia sebenarnya mempunyai rahsia. Ramai orang baru akan jatuh ke dalam beberapa lubang dan berfikir bahawa mereka boleh melakukannya hanya dengan menambah gaya, tetapi sebenarnya mereka tidak. Mari kita menganalisisnya secara mendalam hari ini, supaya anda dapat menguasai teknik -teknik susunan menegak senarai bootstrap dan mengelakkan perangkap gila.

Pertama sekali, mesti jelas bahawa bootstrap itu sendiri tidak secara langsung menyediakan fungsi "senarai susunan menegak". Ia memberi perhatian lebih kepada susun atur responsif, dan susunan senarai biasanya ditentukan oleh sifat -sifat bekas dan item senarai. Oleh itu, untuk meletakkannya secara terang -terangan, apa yang perlu kita lakukan adalah dengan bijak menggunakan mekanisme bootstrap yang sedia ada untuk mencapai kesan pengaturan menegak.

Kesalahpahaman yang paling biasa adalah secara langsung menambah vertical ke tag <ul></ul> atau <ol></ol> . Ini tidak berguna sama sekali! Ini bukan bagaimana nama kelas bootstrap dimainkan.

Jadi apa yang harus saya lakukan? Rahsia terletak pada atribut display dan sistem raster Bootstrap.

Cara yang paling mudah dan paling langsung ialah menggunakan Flexbox. Kami hanya perlu menambah kelas d-flex flex-column ke bekas induk senarai. d-flex membolehkan susun atur Flexbox, flex-column ditentukan sebagai susunan menegak. Kodnya adalah seperti berikut:

 <code class="html"><div class="d-flex flex-column"> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div></code>

Barisan kod ini mudah dan cekap, dan menyelesaikan masalah dengan serta -merta. Kelas list-group menyediakan gaya senarai Bootstrap sendiri untuk menjadikan senarai anda kelihatan lebih cantik. Trik ini mudah dan kasar, tetapi mudah digunakan!

Tetapi tunggu, perkara belum selesai. Jika item senarai anda adalah kompleks, seperti mengandungi gambar dan teks, bergantung semata-mata pada flex-column mungkin tidak mencapai hasil yang diharapkan. Pada masa ini, anda memerlukan lebih banyak kawalan halus. Anda boleh menggabungkan sistem raster Bootstrap untuk menetapkan lebar lajur untuk setiap item senarai untuk mengawal susun atur yang lebih baik. Contohnya:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-6"> <div class="list-group-item">Item 1 with more complex content</div> </div> <div class="col-md-6"> <div class="list-group-item">Item 2 with more complex content</div> </div> </div> </div></code>

Kod ini menggunakan sistem raster Bootstrap untuk meletakkan setiap item senarai dalam lajur berasingan untuk susun atur yang lebih fleksibel. Perhatikan bahawa saya menggunakan kelas row dan col di sini, yang merupakan teras sistem raster bootstrap.

Ingatlah, jangan cuba menggunakan float atau position untuk mencapai susunan menegak, ia akan menyebabkan anda jatuh ke dalam kekacauan CSS dan ia akan menjadi mimpi ngeri untuk mengekalkan. Sistem Flexbox dan Grid Bootstrap adalah cara yang betul!

Akhirnya, mengenai pengoptimuman prestasi, perbezaan prestasi antara kedua -dua kaedah sebenarnya sangat kecil. Kecuali bilangan item dalam senarai anda sangat besar, jangan terlalu risau. Lebih penting lagi, tulis kod ringkas dan mudah difahami untuk memastikan pemeliharaan kod. Ini adalah kunci kepada pengaturcaraan yang cekap! Jangan mengorbankan kebolehbacaan kod dan penyelenggaraan untuk meneruskan prestasi yang melampau, kerana keuntungan tidak bernilai kerugian!

Atas ialah kandungan terperinci Bagaimana senarai bootstrap disusun secara menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!