表比 Bootstrap 列容器宽答案

【问题标题】：Table wider than Bootstrap column container表比 Bootstrap 列容器宽
【发布时间】：2015-01-04 17:05:09
【问题描述】：

有人可以向我解释为什么会这样吗？我已经将我的内容包装在 Bootstrap 响应式 div 中，并且我在该 div 内的表格的宽度大于容器。

<div class="row">
  <div class="col-md-4">
    <table class="table">
      <tbody>
        <% @user.each do |user| %>
          <tr>
            <td><%= user.content %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

问题是，如果我有一个包含很多字符的非常大的内容，表格会变得比它的容器<div class="col-md-4"> 宽得多。如何实现它的内容换行而不破坏布局？感谢您的帮助！

【问题讨论】：

我无法复制bootply.com/NlQzHknXpH。
@blelump，这里是：bootply.com/95mp6t12pD

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

以下应该有效：

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

前面适用于 HTML 中的所有 table 标签，因此请定义您自己方便的 class。

【讨论】：

【解决方案2】：

尝试添加word-wrap 和word-break

td {
  word-wrap:break-word;
  word-break:break-all;
}

这是您更新后的Bootply

【讨论】：