Table 内部 Bootstrap 网格超越网格

Question

这可能很难解释。

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

在col-xs-2，我有一方panel/menu。在 col-xs-10 中，我有一个显示用户数据的 table。（顺便说一句，Honorificabilitudinitatibus 这个词是我从维基百科得到的一个长词。

问题是因为我的table内容太多或者字太长，table超出了rowdiv，我用红色边框突出显示。

我希望一切都在红色边框内（或者红色边框随着 table 变大而变大）。我如何在 bootstrap 中执行此操作？

谢谢

Answer 1

正如@Joseph Marikle 建议的那样，您应该查看 bootstrap 提供的响应式表格功能。他们很可能已经解决了很多与此相关的问题。

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

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

Answer 2

Bootstrap row 旨在放置在 container 内，因此它包含负边距，导致您的 table 超出范围。

所以你应该把 row div 放在 .container-fluid...

Table Inside Bootstrap Grid Goes Beyond the Grid