Bagaimana cara menukar saiz senarai bootstrap?

Saiz senarai bootstrap bergantung kepada saiz bekas yang mengandungi senarai, bukan senarai itu sendiri. Menggunakan sistem grid Bootstrap atau Flexbox boleh mengawal saiz bekas, dengan itu secara tidak langsung mengubah saiz item senarai.

Saiz senarai bootstrap? Soalan ini hebat! Ia kelihatan mudah di permukaan, tetapi sebenarnya ia mengandungi rahsia, yang melibatkan reka bentuk responsif Bootstrap, susun atur Flexbox, dan juga kedalaman pemahaman CSS. Jangan risau, mari bercakap dengan perlahan.

Mari kita bincangkan kesimpulan pertama: Anda tidak boleh secara langsung "menukar" saiz senarai bootstrap. Untuk menjadi tepat, apa yang anda ubah adalah saiz bekas yang mengandungi senarai, dengan itu secara tidak langsung mempengaruhi paparan item senarai. Senarai bootstrap itu sendiri hanyalah struktur HTML semantik, dan ia tidak mempunyai saiz tetap.

Fikirkanlah, intipati bootstrap terletak pada responsnya, yang secara automatik menyesuaikan susun atur mengikut saiz skrin. Sekiranya anda secara paksa menentukan saiz mati untuk senarai, tidakkah reka bentuk responsif sia -sia? Oleh itu, kunci adalah untuk memahami mekanisme susun atur bootstrap dan bagaimana untuk menggunakan CSS secara fleksibel.

Mari kita semak semula struktur senarai bootstrap, yang tidak lebih daripada <ul></ul> , <ol></ol> , <dl></dl> tags, dan mereka tidak mempunyai gaya sendiri. Bootstrap memberi mereka gaya kelas CSS, seperti list-unstyled untuk mengeluarkan peluru, list-inline untuk mengatur item senarai secara mendatar, dan lain-lain. Kelas-kelas ini hanya mengawal gaya item senarai, bukan saiznya.

Untuk mengawal saiz senarai, kaedah yang paling biasa ialah menggunakan sistem grid Bootstrap atau Flexbox. Katakan anda menggunakan senarai yang tidak teratur:

 <code class="html"><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></code>

Sekarang anda ingin mengawal ketinggian dan lebar senarai ini, anda boleh melakukan ini:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-6"> <!-- 控制列宽，响应式--> <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> </div> </div></code>

Sistem grid Bootstrap digunakan di sini, col-md-6 membolehkan senarai untuk menduduki separuh lebar skrin. Anda boleh mengubah suai nilai col-md-* seperti yang diperlukan. Sudah tentu, anda juga boleh menggunakan Flexbox, yang lebih fleksibel:

 <code class="html"><div style="display: flex; flex-direction: column; width: 200px; height: 300px; overflow-y: auto;"> <!-- 用Flexbox控制大小，并添加滚动条--> <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> <li class="list-group-item">Item 4</li> <li class="list-group-item">Item 5</li> <li class="list-group-item">Item 6</li> </ul> </div></code>

Contoh ini menggunakan Flexbox untuk mengawal lebar dan ketinggian bekas senarai, dan menambah overflow-y: auto; Untuk membenarkan bar skrol muncul apabila kandungan melebihi kandungan untuk mengelakkan kandungan dari limpahan.

Ingat, ini hanya hujung gunung es. Dalam aplikasi sebenar, anda mungkin perlu menggabungkan pertanyaan media untuk mengendalikan kesan paparan di bawah saiz skrin yang berbeza, atau secara dinamik menyesuaikan ketinggian mengikut kandungan item senarai. Dan jangan lupa untuk mempertimbangkan gaya item senarai itu sendiri, ketinggian mereka juga akan menjejaskan ketinggian senarai keseluruhan. Susun atur yang baik memerlukan beratnya dengan pelbagai faktor, yang merupakan intipati bootstrap. Jangan keliru dengan fenomena dangkal. Hanya dengan memahami mekanisme susun atur bootstrap, anda boleh benar -benar mengawalnya.

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