Bagaimana untuk Menyesuaikan Lebar Lajur dalam 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!