表比Bootstrap列容器宽

Question

有人可以向我解释为什么会这样吗？我把我的内容包装在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">.如何实现它的内容包装到另一行而不是破坏布局？谢谢您的帮助!

Answer 1

尝试添加word-wrap和word-break

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

这是你更新的Bootply

Answer 2

以下应该工作：

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

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