表列大小

Question

在Bootstrap 3，我可以适用col-sm-xx于th在标签thead和随意调整表列。但是，这在Bootstrap
4中不起作用。如何在Bootstrap 4中实现类似的功能？

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

查看提供的codeply大小不正确，特别是如果您向表中添加一些数据。查看其运行方式：

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

Answer 1

更新于2018

确保您的表包含table该类。这是因为Bootstrap4表是“选择加入”的，因此table必须有意将类添加到表中。

Bootstrap 3.x还具有一些CSS来重置表单元，以使它们不会浮动。

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

我不知道为什么Bootstrap 4 alpha并不是这样，但是它可能会在最终版本中重新添加。添加此CSS将有助于所有列使用thead..中设置的宽度。

UPDATE（自Bootstrap 4.0.0起）

现在，Bootstrap 4是flexbox，添加时，表格单元将不会采用正确的宽度col-*。一种解决方法是使用d-inline- block表格单元格上的类来防止默认的display：flex列。

BS4中的另一种选择是使用宽度大小的utils类…

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

最后，您可以d-flex在表格行（tr）和col-*列的网格类（th，td）上使用…

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