如何调整 Bootstrap 4 表格列的大小？-css教程-PHP中文网

如何调整 Bootstrap 4 表格列的大小？

DDD

发布： 2024-10-30 05:57:28

原创

658 人浏览过

How do I resize Bootstrap 4 table columns?

调整 Bootstrap 4 表列的大小

Bootstrap 3 允许使用 thead 中的标签上的 col-sm-xx 类来调整表列的大小。但是，此方法在 Bootstrap 4 中无效。

更新方法

第 1 步：确保 Table 上的“table”类

Bootstrap 4 表是“选择加入”的，这意味着表类必须显式添加到表元素中。

第 2 步：添加用于内联块显示的 CSS

Bootstrap 3 之前包含 CSS 来重置表格单元格位置并防止浮动。 Bootstrap 4 Alpha 中没有此 CSS，但您可以添加它：

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

登录后复制

第 3 步：使用调整大小实用程序类（Bootstrap 4.0.0 及更高版本）

或者，在 Bootstrap 4.0.0 及更高版本中，您可以使用 w-* 实用程序类来设置宽度：

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

登录后复制

第 4 步：利用 Flexbox（Bootstrap 4.0.0 及更高版本）

另一个选项是在 tr 行上使用 d-flex 并在列上使用像 col-* 这样的网格类：

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

登录后复制

以上是如何调整 Bootstrap 4 表格列的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！