Bootstrap开发ASP.NET MVC时表格按钮超出屏幕如何适配任意缩放

导致按钮溢出屏幕、出现横向滚动的核心原因有3个：

• HTML表格结构错位：操作列的<td>节点直接写在了<thead>的行标签内，既没有对应的<th>表头，也没有放在表体<tbody>的行节点中，浏览器自动修正错位结构时会出现表格宽度计算异常。
• 按钮组写法错误：Bootstrap的btn-group类默认将组内按钮横向排列，你在两个按钮中间插入<br/>强制换行，又给删除按钮写了内联左外边距，同时给按钮组设置w-75固定占比，缩放时宽度计算逻辑冲突直接撑破单元格。
• 缺少响应式约束：Bootstrap原生表格默认不会自动限制内容溢出，未加响应式包裹容器时，单元格内容最小宽度超过视口就会出现横向滚动。

按以下调整即可实现任意缩放比例下无横向滚动：

• 修正表格结构，拆分表头<thead>和表体<tbody>，给操作列补全对应表头，将操作按钮的单元格移动到表体的数据行内。
• 移除按钮之间的<br/>标签和按钮上硬编码的内联边距，用Bootstrap自带的尺寸类调整按钮大小，避免宽度计算冲突。
• 用Bootstrap原生的.table-responsive容器包裹表格，兜底处理极端缩放场景下的宽度适配，必要时给操作列设置最小宽度避免按钮被挤压变形。

样式部分 #

原有body样式无需改动，可补充兜底样式：

body {  
  margin: 0;  
  font-family: var(--bs-body-font-family);  
  font-size: var(--bs-body-font-size);  
  font-weight: var(--bs-body-font-weight);  
  line-height: var(--bs-body-line-height);  
  color: var(--bs-body-color);  
  text-align: var(--bs-body-text-align);  
  background-color: var(--bs-body-bg);  
  -webkit-text-size-adjust: 100%;  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
}
.action-col {
  min-width: 160px;
}

页面结构部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="table-responsive">
  <table class="table table-secondary w-100">
    <thead>
      <tr>
        <th>
          @Html.DisplayNameFor(model => model.Id)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th class="action-col">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>@item.Id</td>
        <td>@item.Surname</td>
        <td>
          <div class="btn-group btn-group-sm" role="group">
            <a asp-controller="Payments" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-dark">
              <i class="bi bi-pencil-square"></i> Edit
            </a>
            <a asp-controller="Payments" asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger">
              <i class="bi bi-trash-fill"></i> Delete
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

• 如果需要在极窄宽度下进一步优化显示，可以把按钮组的类从btn-group替换为btn-group-vertical w-100，按钮会自动纵向排列占满列宽，完全不会出现溢出。
• 尽量避免用内联style写固定边距、宽度，优先使用Bootstrap自带的工具类（比如用ms-1代替margin-left: 5px），减少样式冲突。

问题现象截图：

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