twitter-bootstrap - 为什么 Twitter Bootstrap 表格的宽度总是 100%？

Question

假设这个标记:

<table class="table table-bordered" align="center"> 

无论我有多少个单元格，表格始终是 100% 宽度。为什么？

Answer 1

Bootstrap 中的所有表格都根据其容器进行拉伸(stretch)，您可以通过将表格放置在您选择的 .span* 网格元素内来轻松实现这一点。如果您希望删除此属性，您可以创建自己的表类，然后将其添加到您想要使用其中内容扩展的表中:

.table-nonfluid {
   width: auto !important;
}

您可以将此类添加到您自己的样式表中，然后将其添加到表的容器中，如下所示:

<table class="table table-nonfluid"> ... </table>

这样您的更改就不会影响 Bootstrap 样式表本身(您可能希望在文档中的其他位置有一个流动表)。