为什么 Bootstrap 总是有100% 的宽度？

小开

最佳答案

引导带中的所有表都可以根据其容器进行拉伸，这可以通过将表放置在所选的 .span*网格元素中来轻松实现。如果您希望删除此属性，您可以创建自己的表类，并简单地将其添加到要展开的表中，其中包含:

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

您可以将这个类添加到您自己的样式表中，并简单地将其添加到表的容器中，如下所示:

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

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

小开

我遇到了同样的问题，我修复了表，然后指定了 td 的宽度。如果你有这个，你也可以做这些。

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>


<td width="10%" /td>

我没有任何运气。表-非流体。

小开

我已经尝试添加 style="width: auto !important"和伟大的工作为我！

小开

<table style="width: auto;" ...运行良好，在 Chrome38，IE11和 Firefox34中测试过。

小开

引导程序3:

为什么要反对它呢? 为什么不简单地使用引导网格来控制表的宽度呢？

<div class="row">
<div class="col-sm-6">
<table></table>
</div>
</div>

这将创建一个只有包含元素宽度的一半(12分之6)的表。

我有时根据其他答案使用内联样式，但这是不鼓励的。

Bootstrap 4在宽度上有一些很好的辅助类，比如 w-25、 w-50、 w-75、 w-100和 w-auto。这将使表50% 的宽度:

<table class="w-50"></table>

小开

如果您正在使用 Bootstrap 4，请使用 .w-auto。