表比 Bootstrap 列容器宽

Posted 2023-03-06

【中文标题】表比 Bootstrap 列容器宽

【英文标题】：Table wider than Bootstrap column container

【发布时间】：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

【参考方案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