Bagaimana untuk Menyesuaikan Lebar Lajur dalam Bootstrap 4?

Barbara Streisand
Lepaskan: 2024-11-02 08:27:02
asal
547 orang telah melayarinya

How to Customize Column Widths in Bootstrap 4?

Saiz Lajur dalam Bootstrap 4

Keupayaan untuk menyesuaikan lebar lajur dalam Bootstrap 3 menggunakan col-sm-xx telah dihentikan dalam Bootstrap 4. Perubahan ini mungkin disebabkan kepada pelaksanaan flexbox dalam Bootstrap 4, yang menyediakan pendekatan yang berbeza untuk susun atur. Untuk mencapai saiz semula lajur dalam Bootstrap 4, anda boleh meneroka penyelesaian alternatif.

Memastikan Kehadiran Kelas jadual

Pertama sekali, sahkan bahawa jadual anda mengandungi "jadual" kelas. Jadual Bootstrap 4 mengikut serta, memerlukan anda menambah kelas ini secara eksplisit. Ini penting untuk pemformatan dan saiz lajur yang betul.

Perubahan Flexbox dan CSS

Dalam Bootstrap 3, CSS digunakan untuk menghalang sel jadual daripada terapung dan memastikan ia berfungsi dengan betul . Walau bagaimanapun, CSS ini tidak disertakan dalam Bootstrap 4 alpha. Menambah CSS ini secara manual boleh membantu memastikan lajur mematuhi lebar yang ditentukan dalam pengepala jadual (kepala).

d-inline-block untuk Sel Jadual

Pendekatan lain adalah untuk menggunakan kelas "d-inline-block" pada sel jadual (td). Ini menentang gelagat lajur "display:flex" lalai, membenarkan mereka mengambil lebar yang sesuai.

Sizing Utilities Classes

Bootstrap 4 menyediakan saiz kelas utiliti seperti " w-25" dan "w-50" untuk menetapkan lebar tertentu pada lajur. Kelas ini menawarkan kaedah saiz lajur yang mudah dan responsif.

Kelas Grid Flexbox dan col-*

Anda juga boleh memanfaatkan kelas d-flex pada baris jadual ( tr) dan kelas grid col-* pada lajur (th,td). Pendekatan ini membolehkan lebar lajur yang fleksibel dan responsif.

Nota: Menggunakan paparan:flex pada baris jadual boleh menjejaskan sempadan jadual, memerlukan pelarasan tambahan.

Ringkasnya, lajur saiz dalam Bootstrap 4 telah berubah disebabkan oleh peralihan kepada flexbox. Penyelesaian alternatif tersedia, seperti memastikan kehadiran kelas jadual, mengubah suai CSS, menggunakan d-inline-block untuk sel jadual, saiz kelas utiliti dan flexbox dengan kelas grid col-* pada baris dan lajur.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Lebar Lajur dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!