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