Bootstrap 4 表格列宽在 IE11 和 Microsoft Edge 中的格式不正确

Posted 2023-03-05

【中文标题】Bootstrap 4 表格列宽在 IE11 和 Microsoft Edge 中的格式不正确

【英文标题】：Bootstrap 4 table column width not formatting correctly in IE11 and Microsoft Edge

【发布时间】：2018-01-08 13:54:24

【问题描述】：

有没有人在使用 IE11 或 Microsoft Edge 时遇到过 Bootstrap 4 表格列格式不正确的问题？

请检查小提琴—— https://jsfiddle.net/vqazpa15/

（这在 IE11/Edge 中不起作用，但在 Firefox/Chrome 中起作用）

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-2">column 1</th>
            <th class="col-3">column 2</th>
            <th class="col-7">column 3</th>
        </tr>
    </thead>
</table>

（这适用于我测试的所有浏览器）

<div class="row">
    <div class="col-2">column 1</div>
    <div class="col-3">column 2</div>
    <div class="col-7">column 3</div>
</div>

小提琴中有两个例子。第一个示例将内容包装在一个表格中。第二个内容包裹在一个div中。如您所见，这两个示例在 Firefox 和 Chrome 中的格式都很好，但在 IE11 和 Edge 中，只有“div”示例格式正确——表格变得很乱。

有谁知道怎么回事？？

提前致谢！

【问题讨论】：

可以确认这一点，仍然适用于v4.0.0-beta1。

【参考方案1】：

我在Bootstrap's Github 和Mark 上创建了一个issue，表示不要在表格上使用row 和col 类，因为它们是弹性框，因此会破坏表格的显示属性。