Twitter bootstrap 3 为什么折叠引导面板中的表会改变宽度？

我在这里做了一个Bootply演示：

这是一个面板，上面有一张桌子。但是，我也使面板可折叠。折叠位工作正常，但表格本身不保持形状。正如您将在Bootply中看到的，当您第一次加载页面时，它不会填充面板的宽度。当您单击面板标题中的“改进”以折叠面板时，表格将在动画期间占据整个面板宽度，然后消失。当再次单击以显示面板内容时，表格为全宽，直到动画停止，此时，表格收缩回“自动”宽度

奇怪的是，检查table元素显示表本身是全宽的，但是thead、tbody和tfoot不是

我已经追踪到表中是否存在“崩溃”类。如果启动Bootply时没有使用“collapse”类，则在折叠面板之前，它是全宽的。当您展开它时，它将返回到“自动宽度”。我不知道为什么。。。你知道吗

下面是代码片段，但这里似乎没有运行折叠。靴子比较好

描述
数量
计量单位
比率
价值
项目1
133
平方米
425
56,525
项目2
85
平方米
70
5,950
项目3
25
平方米
100
2,500
项目4
1,500
全部的
66,475

类将表上的显示样式在

无

和

块

之间切换，这似乎干扰了标准表CSS

您可以通过将表放在div中并将该div设置为折叠而不是表来解决此问题

新引导层：

HTML:

描述
数量
计量单位
比率
价值
项目1
133
平方米
425
56,525
项目2
85
平方米
70
5,950
项目3
25
平方米
100
2,500
项目4
1,500
全部的
66,475

或者，您可以添加css：

table.collapse.in {
   display: table;
}

---

可以说，这可能是一个补丁。

Gah。。。我认为桌子必须是面板的直接子对象，才能正常工作。谢谢。不幸的是，将表格放在一个div中会导致一个小的UI布局问题：在面板标题的底部会看到一个不需要的边框，而在面板的末尾会看到更多的空间。但是，您可以将折叠目标设置为表中的某个对象，如thead和tbody，它们就可以了。

table.collapse.in {
   display: table;
}