Bootstrap5表格内文本输入框宽屏下列宽异常过宽如何修复

异常来自表格单元格内误用了Bootstrap栅格类：你给输入框外层div加了col-12 col-md-3，但Bootstrap栅格类必须放在带row类的flex父容器下才能正常计算宽度。当前div外层只有普通<td>标签，没有对应的row容器，屏幕宽度达到md断点以上时，col-md-3的宽度规则脱离栅格布局约束，直接把所在列撑宽。
小屏显示正常是因为col-12对应width:100%规则，刚好适配单元格宽度，不会触发计算异常。

任选一种方式修改即可：

• 最简改法：删掉多余的栅格div，直接把输入框放在<td>里，表单控件会自动适配单元格宽度，对应单元格代码修改为：

<td>
  <input type="text" class="form-control form-control-sm" placeholder="sum">
</td>

• 保留div结构的改法：移除div上的col-12 col-md-3类，替换为w-100让容器占满单元格宽度即可，代码如下：

<td>
  <div class="w-100">
    <input type="text" class="form-control form-control-sm" placeholder="sum">
  </div>
</td>

• 需要限制输入框宽度的改法：不要在表格内用栅格类控制宽度，直接给输入框加宽类（比如w-75让输入框占单元格75%宽度），同时给TITLE 1对应的<th>标签加w-auto类，让列宽跟随内容自适应即可。

提示：Bootstrap栅格系统是为flex布局设计的，不要直接在默认table布局的单元格内套用栅格类，很容易触发表格宽度计算异常。

内容的提问来源于stack exchange，提问作者Noam B.