Bootstrap 3中,我可以将col-sm-xx应用于thead列中的th个标记,并随意调整表列的大小.但是,这在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>

如果代码的大小不正确,请查看代码,特别是在向表中添加一些数据的情况下.请查看此命令的运行方式:

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

推荐答案

Updated 2018

请确保您的餐桌包括table级.这是因为Bootstrap 4 tables are "opt-in",所以必须故意将table类添加到表中.

http://codeply.com/go/zJLXypKZxL

Bootstrap3.x还提供了一些CSS来重置表格单元格,以便它们不会浮动.

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

我不知道为什么这不是Bootstrap 4alpha,但它可能会在最终版本中添加回来.添加此CSS将帮助所有列使用thead.中设置的宽度.

Bootstrap 4 Alpha 2 Demo


UPDATE (as of Bootstrap 4.0.0)

现在Bootstrap 4是Flexbox,表格单元格在添加col-*时将不会采用正确的宽度.一种解决方法是在表格单元格上使用d-inline-block类来阻止默认显示:列的伸缩.

BS4中的另一个选项是使用调整大小实用程序类来表示宽度……

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

Bootstrap 4 Alpha 6 Demo

最后,您可以对表行(Tr)使用d-flex,对列(th,td)使用col-*个网格类……

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

Bootstrap 4.0.0 (stable) Demo

注:将TR更改为显示:FLEX can alter the borders

Css相关问答推荐

使用 MUI 动态绘制多个边框

CSS Stepper - LI After Overlaying LI Before

在嵌套的弹性框中创建弹性项目之间的空间

reactjs - 容器中水平行的png图像

css中的背景图像没有被缓存

在 vuetify 中跨 `default.vue` 和 `index.vue` 维护网格系统

弹性盒项目之间的间距

最小内容和最大内容如何工作?

使用 JavaScript 将 CSS 添加到?

Bootstrap:在列之间添加边距/填充空间

我可以制作具有动态行数或列数的 CSS 网格吗?

有没有办法用 url() 插入 CSS 变量?

如何使 window.scrollTo() 效果平滑

Chrome 设备模式模拟媒体查询不起作用

CSS 中的 * 和 *|* 有什么区别?

模拟显示:React Native 中的内联

对象拟合不影响图像

在 CSS Flexbox 中,为什么没有“justify-items”和“justify-self”属性?

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?

边界半径不起作用