如何在 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中文网其他相关文章！