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一般启用或禁用换行，但默认情况下允许换行（在.table的Bootstrap中就是这种情况。）

Answer 2

他们对我的反应很敏感......你在找什么？ Bootstrap不会改变基于平板电脑/手机的字体大小，只会更改容器及其行为（内联块与块等）。

Answer 3

Twitter Bootstrap开箱即用，但不一定是调整后的布局。您需要对我做的是调整css中.well的大小以包含调整页面大小的表格。 .well在.span3中，当你缩小窗口时，Bootstrap自动调整为更小...