Bagaimanakah saya boleh mengubah saiz lajur jadual Bootstrap 4?

Mengubah Saiz Bootstrap 4 Lajur Jadual

Bootstrap 3 dibenarkan mengubah saiz lajur jadual menggunakan kelas col-sm-xx pada teg ke dalam thead. Walau bagaimanapun, kaedah ini tidak berkesan dalam Bootstrap 4.

Pendekatan Kemas Kini

Langkah 1: Pastikan Kelas "jadual" di atas Meja

Jadual Bootstrap 4 ialah "ikut serta", bermakna kelas jadual mesti ditambahkan secara eksplisit pada elemen jadual.

Langkah 2: Tambah CSS untuk Paparan Blok Sebaris

Bootstrap 3 sebelum ini menyertakan CSS untuk menetapkan semula kedudukan sel jadual dan mengelakkan terapung. CSS ini tiada dalam Bootstrap 4 Alpha, tetapi anda boleh menambahkannya:

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

Langkah 3: Gunakan Kelas Utiliti Saiz (Bootstrap 4.0.0 dan Kemudian)

Sebagai alternatif, dalam Bootstrap 4.0.0 dan seterusnya, anda boleh menggunakan kelas utiliti w-* untuk lebar:

<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>

Langkah 4: Gunakan Flexbox (Bootstrap 4.0.0 dan Kemudian)

Pilihan lain ialah menggunakan d-flex pada baris tr dan kelas grid seperti col-* 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 Bagaimanakah saya boleh mengubah saiz lajur jadual Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!