css - Bootstrap 响应式表的问题

Question

你能看看这个链接，让我知道为什么这个页面中的表格内容没有响应吗？我的意思是表格字体。如您所见，我在三列中有三张表格，它们在台式机上看起来不错，但在平板电脑和智能手机上却不行！我真的很困惑在引导程序中使用 span 类，我不确定我在这里做对了吗？

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

Answer 1

问题是表格感觉需要增长到最小长度，而最小长度实际上就是所包含字符串的长度。

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

.table {
    table-layout: fixed
}

然后，您需要解决单词不换行的问题，或者更准确地说：不中断。考虑到这里缺乏控制，这可能是一个更大的麻烦，但是有一个word-breakCSS 属性。

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

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

您应该注意另一个 CSS 属性，但您不需要在此处设置。white-space通常启用或禁用包装，但默认情况下它允许它（在 Bootstrap for 中就是这种情况.table）。

Answer 2

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

Answer 3

他们对我有反应……你在找什么？Bootstrap 不会根据平板电脑/移动设备更改字体大小，只会更改容器及其行为（内联块与块等）。