Bagaimana cara mengatur senarai bootstrap secara mendatar?

Bagaimana cara mengatur senarai bootstrap secara mendatar? Letakkan item senarai berturut -turut dengan kelas baris. Gunakan kelas COL untuk mengawal lebar item senarai, seperti COL-MD-4 untuk mewakili 4 lajur di bawah saiz skrin sederhana. Margin dalaman dan luaran boleh diselaraskan menggunakan P-2 dan MX-2. Gunakan D-Flex Flex-Wrap untuk membolehkan Flexbox pada baris untuk pembalut talian automatik. Gunakan col-md-auto untuk membuat item senarai menduduki lebar yang diperlukan secara automatik.

Senarai bootstrap susunan mendatar? Soalan ini hebat! Ramai orang baru akan terjebak di sini, tetapi tidak begitu rumit. Kuncinya adalah untuk memahami sistem grid Bootstrap dan beberapa petua. Dalam artikel ini, saya akan membawa anda dari asas -asas untuk maju, menyusun susunan mendatar senarai bootstrap, dan berkongsi beberapa perangkap dan beberapa rahsia unik yang saya telah melangkah selama bertahun -tahun.

Mari kita bincangkan asas -asas terlebih dahulu. Anda perlu memahami bagaimana bootstrap dibentangkan menggunakan sistem grid. Ia menggunakan kelas row dan col untuk mengawal susunan elemen. row mewakili baris, dan col- diikuti dengan nombor, menunjukkan berapa lajur unsur menduduki. Sebagai contoh, col-md-4 bermaksud menduduki 4 lajur di bawah saiz skrin sederhana, dengan sejumlah 12 lajur. Jika anda tidak memahami sistem grid ini, yang di belakangnya tidak berguna.

Sekarang, mari kita terus ke topik: Bagaimana untuk mengatur senarai secara mendatar? Kaedah yang paling mudah dan paling kasar adalah untuk meletakkan item senarai li dalam row , dan kemudian gunakan kelas col untuk mengawal lebar setiap li . Seperti ini:

 <code class="html"><div class="row"> <div class="col-md-4"> <li>Item 1</li> </div> <div class="col-md-4"> <li>Item 2</li> </div> <div class="col-md-4"> <li>Item 3</li> </div> </div></code>

Adakah anda pernah melihatnya? col-md-4 membolehkan setiap item senarai untuk menduduki 4 lajur, dan tiga item menduduki satu baris, disusun dengan sempurna secara mendatar! Sudah tentu, anda juga boleh menggunakan col-sm- , col-lg- , dan lain-lain untuk mengawal susunan saiz skrin yang berbeza, bergantung kepada keperluan reka bentuk anda.

Tetapi tunggu! Ini hanya penggunaan yang paling asas. Dalam permohonan sebenar, anda mungkin menghadapi situasi yang lebih kompleks. Sebagai contoh, lebar item senarai tidak ditetapkan, atau anda ingin mempunyai jarak antara item senarai.

Pada masa ini, anda perlu menggunakan kelas lain yang disediakan oleh Bootstrap. p-2 boleh menambah margin dalaman, mx-2 boleh menambah margin mendatar. Anda boleh menyesuaikan nilai -nilai ini seperti yang diperlukan.

Melangkah lebih jauh, bagaimana jika anda mahu item senarai untuk membungkus secara automatik, simpannya secara mendatar, tetapi secara automatik membungkusnya ke baris seterusnya apabila mereka melebihi lebar skrin? Ini memerlukan Flexbox. Menambah kelas d-flex flex-wrap ke row boleh mencapai kesan ini.

 <code class="html"><div class="row d-flex flex-wrap"> <div class="col-md-auto p-2"> <li>Item 1</li> </div> <div class="col-md-auto p-2"> <li>Item 2</li> </div> <div class="col-md-auto p-2"> <li>Item 3</li> </div> <div class="col-md-auto p-2"> <li>Item 4</li> </div> <!-- 可以添加更多列表项--> </div></code>

Di sini col-md-auto membolehkan setiap item senarai secara automatik menduduki lebar yang diperlukan, manakala flex-wrap membolehkan pembungkus talian. Ingat p-2 , ini akan membantu anda dengan mudah mengawal jarak dan mengelakkan senarai item yang berkumpul bersama.

Akhirnya, beberapa pengalaman: Jangan terlalu bergantung pada gaya lalai bootstrap, belajar menyesuaikan mengikut keperluan anda. Cuba kombinasi kelas dan atribut yang berbeza untuk mencari penyelesaian terbaik untuk projek anda. Jangan takut untuk mencuba, dengan berani mengubah kod dan belajar dari kesilapan, supaya anda boleh menjadi tuan bootstrap yang benar! Ingat, amalan membawa pengetahuan yang benar!

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