为何生成的简易HTML代码出现水平Scrollbar？

问题出在表格单元格内嵌套的Bootstrap .row 类上。Bootstrap 3的.row默认带有margin-left: -15px和margin-right: -15px的负边距，而包裹它的<td>没有对应的内边距抵消这个负边距，导致内部.row向左右各延伸15px，直接撑开了表格宽度，触发了外层.table-responsive的水平滚动。

以下几种方法都能解决问题，按需选择：

• 方案1：用容器类包裹内部.row
  Bootstrap的.container或.container-fluid自带左右内边距，刚好抵消.row的负边距：

  <td>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          Test
        </div>
      </div>
    </div>
  </td>
  

• 方案2：给<td>添加内边距
  直接给包含.row的<td>设置左右内边距，抵消负边距影响：

  <td style="padding-left: 15px; padding-right: 15px;">
    <div class="row">
      <div class="col-sm-12">
        Test
      </div>
    </div>
  </td>
  

• 方案3：移除不必要的.row类
  如果这个内部结构不需要Bootstrap栅格布局，直接去掉.row类，用普通div替代：

  <td>
    <div>
      <div class="col-sm-12">
        Test
      </div>
    </div>
  </td>
  

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