Bootstrap中响应表的问题

Question

你能看一下这个链接,让我知道为什么这个页面内的表格内容没有响应？我的意思是表格字体.你可以看到我在三列中有三个表,它们在台式机上看起来不错,但在平板电脑和智能手机上却没有!我真的很困惑在bootstrap中使用span类,我不确定我在这里做错了吗？

在这里感谢他们在iPhone 4和iPad 4中的样子

Answer 1

问题是表格感觉需要增长到最小长度,并且最小长度实际上是所包含的字符串的长度.

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

.table {
    table-layout: fixed
}

然后,你需要解决没有包装的单词的问题,或更确切地说:不破坏.鉴于此处缺乏控制,这可能是一个更大的麻烦,但有一个word-breakCSS属性.

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

正如您可能注意到的那样,如果您避免使用没有短划线(-)或空格的非常长的单词会有所帮助,因为它会使浏览器随意选择拆分单词的位置以进行换行.在Chrome中,它甚至/在子类型中都没有中断.你最好在这些角色周围添加空格.它还可以在不需要包装的情况下提高人类的可读性.

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