Bootstrap 3表格内pre元素无法实现滚动的问题求助

嘿，这个问题我之前做项目的时候也碰到过，其实只需要给pre元素加几行CSS就能完美解决——既保留单元格col-xs-10的尺寸，又能让pre里的长内容通过滚动条查看。

具体步骤： #

1. 先确认你的表格结构没问题，单元格正确应用了Bootstrap的栅格类：

<table class="table">
  <tbody>
    <tr>
      <td class="col-xs-2">代码说明</td>
      <td class="col-xs-10">
        <pre>// 这里放你的长代码或者文本内容
function example() {
  // 假设这是一段非常长的代码，超出了单元格的宽度范围
  console.log("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
}</pre>
      </td>
    </tr>
  </tbody>
</table>

2. 添加针对性的CSS样式：

/* 针对col-xs-10单元格里的pre元素 */
td.col-xs-10 pre {
  max-width: 100%; /* 强制pre不超出单元格宽度 */
  overflow-x: auto; /* 横向内容超出时显示滚动条 */
  /* 可选：如果需要限制纵向高度，添加下面的属性 */
  max-height: 300px;
  overflow-y: auto;
  /* 可选：增加内边距让内容更美观 */
  padding: 0.75rem;
}

原理说明： #

• Bootstrap的col-xs-10已经为单元格设定了固定的宽度比例，给pre加max-width: 100%可以让它完全继承单元格的宽度，不会突破边界。
• overflow-x: auto会在pre内容宽度超过容器时自动显示横向滚动条，不影响整体布局；如果有纵向过长的需求，加上max-height和overflow-y: auto就能实现纵向滚动。

这样设置后，你的表格单元格会一直保持col-xs-10的尺寸，pre里的长内容也能通过滚动条完整查看啦～

内容的提问来源于stack exchange，提问作者jos