如何在 Bootstrap 4 表中實現列大小調整？

Bootstrap 4 中的表格列大小

問題：

在Bootstrap 3 中，可以修改列的寬度通過將col-sm-xx 加到th 標籤來設定表標題行。 Bootstrap 4 中似乎缺少此功能。如何在 Bootstrap 4 中實現列大小調整？

答案：

更新（2018）

為確保操作成功，請確保該表包含該表類。 Bootstrap 4 表是「選擇加入」的，需要明確新增表格類別才能啟動表格功能。

Bootstrap 3.x 調整

在Bootstrap 3 中.x 中，使用了額外的CSS 來刪除表格單元格的浮動狀態：

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

Bootstrap 4 Alpha 省略了此自定義，儘管它可能包含在最終版本中。它的添加將確保表格單元格遵循表格標題中設定的寬度。

Bootstrap 4 Alpha 2 更新

隨著 Bootstrap 4 過渡到 Flexbox，列寬不會自動繼承從表頭。若要修正此問題，請在表格儲存格上使用 d-inline-block 類，覆寫列的預設 display:flex 設定。

其他調整大小選項

一個。調整實用程式類別的大小(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. Flexbox 與列網格類別

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

注意：將display:flex 套用至表格行可能會影響邊框顯示。

以上是如何在 Bootstrap 4 表中實現列大小調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！