css - Bootstrap 中响应表的问题

Question

您能看一下THIS LINK吗？并让我知道为什么此页面内的表格内容没有响应？我的意思是表格字体。如您所见，我有三列的三个表格，它们在台式机上看起来不错，但在平板电脑和智能手机上则不然!我对在 Bootstrap 中使用 span 类感到非常困惑，我不确定我在这里做得是否正确？

谢谢 这是它们在 iPhone 4 和 iPad 4 中的样子

Answer 1

问题在于该表需要增长到最小长度，而该最小长度实际上是所包含字符串的长度。

您可以尝试通过“修复” table-layout 来解决这个问题，这至少应该有助于纠正表格宽度的问题。

.table {
    table-layout: fixed
}

然后，您需要解决单词不换行的问题，或者更准确地说:不换行的问题。由于这里缺乏控制，这可能是一个更大的麻烦，但有一个 word-break CSS 属性。

.table {
    word-break: break-all;
}

您可能会注意到，如果您避免使用很长的单词而不使用破折号 (-) 或空格，这会有所帮助，因为它会使浏览器任意选择在何处分割单词以进行换行。在 Chrome 中，它甚至不会在子类型中的 / 上中断。您最好在这些字符周围添加空格。在不需要换行的情况下，它还提高了人类可读性。

您应该注意另一个 CSS 属性，但不需要在此处设置。 white-space一般情况下启用或禁用换行，但默认情况下它允许换行(Bootstrap for .table 就是这种情况)。