Bootstrap网格中的表格超越了网格

时间:2015-01-12 21:53:00

标签: css twitter-bootstrap twitter-bootstrap-3

这可能很难解释。

请参阅plunker:http://plnkr.co/edit/kSMeYCHjVuXyvy9Uvkdg?p=preview

这是为了模拟我正在处理的应用程序。

col-xs-2中,我有一个侧面板/菜单。 在col-xs-10中,我有一个显示数据用户的表。 (顺便说一句,单词Honorificabilitudinitatibus是我从维基百科得到的一个长词。

问题在于,因为我的表格内容太多或单词太长,所以表格会超出row div,我用红色边框突出显示。

我希望一切都在红色边框内(或红色边框随着桌子变大而增长)。我如何在bootstrap中执行此操作?

由于

2 个答案:

答案 0 :(得分:3)

正如@Joseph Marikle建议的那样,你应该看一下bootstrap提供的响应表功能。他们很可能解决了许多与此相关的问题。

但是,您可以使用CSS属性table-layout以及100%宽度来实现此目的。

table {
  width: 100%;
  table-layout: fixed;
}

答案 1 :(得分:0)

Bootstrap row意味着放在container内,因此它包含负边距,导致你的桌子超出范围。

因此,您应将row div放在.container-fluid ...

http://bootply.com/PTS4QZHgl8