Bagaimana untuk Mencapai Saiz Semula Lajur dalam Jadual Bootstrap 4?

Saiz Lajur Jadual dalam Bootstrap 4

Soalan:

Dalam Bootstrap 3, seseorang boleh mengubah suai lebar lajur sesuatu baris pengepala jadual dengan menambahkan col-sm-xx pada teg ke. Fungsi ini nampaknya tiada dalam Bootstrap 4. Bagaimanakah seseorang boleh mencapai saiz semula lajur dalam Bootstrap 4?

Jawapan:

Dikemas kini (2018)

Untuk memastikan operasi berjaya, pastikan jadual mengandungi kelas jadual. Jadual Bootstrap 4 ialah "ikut serta", memerlukan penambahan kelas jadual yang jelas untuk memulakan kefungsian jadual.

Pelarasan Bootstrap 3.x

Dalam Bootstrap 3 .x, CSS tambahan telah digunakan untuk mengalih keluar status terapung sel jadual:

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

Bootstrap 4 Alpha telah meninggalkan penyesuaian ini, walaupun ia boleh dimasukkan dalam keluaran akhir. Penambahannya akan memastikan sel jadual menghormati lebar yang ditetapkan dalam pengepala jadual.

Kemas Kini Bootstrap 4 Alpha 2

Dengan peralihan Bootstrap 4 kepada flexbox, lebar lajur tidak diwarisi secara automatik daripada pengepala jadual. Untuk membetulkannya, gunakan kelas d-inline-block pada sel jadual, mengatasi paparan lalai: tetapan flex lajur.

Pilihan Saiz Semula Tambahan

a. Kelas Utiliti Saiz (Bootstrap 4.0.0)

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

b. Kelas Flexbox dan Grid 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>

Nota: Menggunakan paparan:flex pada baris jadual mungkin menjejaskan paparan sempadan.

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