如何在 Bootstrap 4 中自訂列寬？

Bootstrap 4 中的列大小

使用 col-sm-xx 自訂 Bootstrap 3 中的列寬度的功能已在 Bootstrap 4 中停止。此變更可能是由於Bootstrap 4 中 Flexbox 的實作提供了不同的佈局方法。若要在 Bootstrap 4 中實現列大小調整，您可以探索替代解決方案。

確保表類的存在

首先，請驗證您的表格是否包含「table」班級。 Bootstrap 4 表是可選的，要求您明確新增此類。這對於正確的格式設定和列大小調整至關重要。

Flexbox 和 CSS 變更

在 Bootstrap 3 中，CSS 用於防止表格單元格浮動並確保它們正確運作。但是，此 CSS 不包含在 Bootstrap 4 alpha 中。手動新增此 CSS 有助於確保列遵循表格標題 (thead) 中指定的寬度。

表格單元格的 d-inline-block

另一種方法是將「d-inline-block」類別應用於表格單元（td）。這抵消了列的預設「display:flex」行為，允許它們採用適當的寬度。

調整大小實用程式類別

Bootstrap 4 提供了調整大小實用程式類，例如「 w-25」和「w-50」用於設定列上的特定寬度。這些類別提供了一種簡化且響應式的列大小調整方法。

Flexbox 和col-* 網格類別

您也可以在表行上利用d-flex 類別（ tr) 和列(th,td) 上的col-* 網格類別。這種方法允許靈活且響應式的列寬。

注意：在表格行上使用 display:flex 可能會影響表格邊框，需要額外調整。

總而言之，列由於過渡到 Flexbox，Bootstrap 4 中的大小調整發生了變化。可以使用替代解決方案，例如確保表格類別的存在、修改 CSS、對表格單元使用 d-inline-block、調整實用程式類別的大小以及在行和列上使用 col-* 網格類別的 Flexbox。

以上是如何在 Bootstrap 4 中自訂列寬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！