Bagaimana untuk Mengubah Saiz Lajur Jadual dalam Bootstrap 4?

Saiz Lajur Jadual dalam Bootstrap 4

Masalah Awal:

Dalam Bootstrap 3, menggunakan col-sm-xx kelas pada elemen pengepala jadual (TH) dibenarkan untuk mengubah saiz lajur yang mudah. Walau bagaimanapun, ini tidak lagi berfungsi dalam Bootstrap 4. Artikel ini menyediakan penyelesaian untuk mencapai kefungsian yang serupa.

Penyelesaian 1: Pastikan Kelas Jadual

Sahkan bahawa jadual anda mempunyai jadual kelas digunakan. Jadual Bootstrap 4 ialah "ikut serta", bermakna kelas ini mesti ditambah untuk mengaktifkan gelagat yang diingini.

Penyelesaian 2: Gunakan Tetapan Semula CSS

Untuk memastikan paparan yang betul daripada lebar lajur, tambahkan CSS berikut:

<code class="css">table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}</code>

Penyelesaian 3: Kelas Blok Sebaris

Untuk mengelakkan lajur daripada menganggap lebar yang salah, gunakan d-inline -sekat kelas ke sel jadual.

Penyelesaian 4: Saiz Kelas Utiliti

Bootstrap 4 termasuk saiz kelas utiliti yang boleh digunakan untuk menetapkan lebar lajur:

<code class="html"><thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead></code>

Penyelesaian 5: Flexbox

Untuk meningkatkan fleksibiliti, pertimbangkan untuk menggunakan flexbox pada baris jadual dan kelas grid pada lajur:

<code class="html"><table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table></code>

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