如何在Bootstrap 4表格单元格中正确添加按钮且不改变行高

问题说明 #

我在表格单元格中添加了一个“删除”按钮后，该按钮所在行的高度出现异常变化，尝试手动缩小按钮高度也没有解决问题。
我找到的相关解决方案提到使用btn-xs类缩小按钮尺寸，测试后问题仍然存在。
当前异常表现：带有delete按钮的第三行高度与其他行不相同。
问题示意：

需求：需要Bootstrap 4框架下的解决方案，优先无需额外编写自定义CSS。
原有相关代码片段：

<td class="text-center">
     <button class="btn btn-outline-primary btn-xs">Delete</button>
</td>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
  <link
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  rel="stylesheet"
/>
</head>
<body>
  <br/><br/>
<div class="container">
  <div class="row">
    <table class="table table-bordered">
      <thead class="thead-light">
        <tr class="text-center">
          <th scope="col" colspan="2">Valeur</th>
          <th scope="col" colspan="2">Achat</th>
          <th scope="col" colspan="2">Vente</th>
          <th scope="col" colspan="2">Cours</th>
          <th></th>
        </tr>
        <tr class="text-center">
          <th scope="col">Code bourse</th>
          <th scope="col">Libellé</th>
          <th scope="col">Quantité</th>
          <th scope="col">Limite</th>
          <th scope="col">Limite</th>
          <th scope="col">Quantite</th>
          <th scope="col">Dernier</th>
          <th scope="col">Volume</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" class="text-center">AED</th>
          <td>AEDIFICA SA</td>
          <td class="text-right">210</td>
          <td class="text-right">116,500</td>
          <td class="text-right">116,700</td>
          <td class="text-right">92</td>
          <td class="text-right">116,600</td>
          <td class="text-right">12</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row" class="text-center">ASC</th>
          <td>ASCENCIO</td>
          <td class="text-right">210</td>
          <td class="text-right">116,500</td>
          <td class="text-right">116,700</td>
          <td class="text-right">92</td>
          <td class="text-right">116,600</td>
          <td class="text-right">12</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row" class="text-center">BANI</th>
          <td>BANIMMO</td>
          <td class="text-right">210</td>
          <td class="text-right">116,500</td>
          <td class="text-right">116,700</td>
          <td class="text-right">92</td>
          <td class="text-right">116,600</td>
          <td class="text-right">12</td>
          <td class="text-center">
            <button class="btn btn-outline-primary btn-xs">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

解决方案 #

出现该问题的核心原因是Bootstrap 4已经正式移除了原生的btn-xs尺寸类，你添加的btn-xs没有对应样式生效，按钮仍保持默认尺寸，因此撑高了所在行的高度。
不需要自定义CSS，仅使用Bootstrap 4自带的原生工具类即可解决，可根据需求选择以下方案：

1. 基础适配
   给放置按钮的<td>添加垂直居中类align-middle，同时将按钮的btn-xs替换为Bootstrap 4原生的小按钮类btn-sm，修改后代码如下：

<td class="text-center align-middle">
  <button class="btn btn-outline-primary btn-sm">Delete</button>
</td>

2. 紧凑尺寸适配
   如果希望按钮尺寸更接近原有btn-xs的大小，可以叠加Bootstrap自带的内边距工具类缩小按钮：

<td class="text-center align-middle">
  <button class="btn btn-outline-primary btn-sm py-0 px-1">Delete</button>
</td>

3. 全局表格适配
   如果希望整个表格的行高更统一、更紧凑，可以给<table>标签添加table-sm类缩小所有单元格的默认内边距，搭配上述按钮修改效果更佳：

<table class="table table-bordered table-sm">
  <!-- 表格原有内容保持不变 -->
</table>

以上方案全部使用Bootstrap 4原生类实现，无需编写任何自定义CSS，修改后所有行的高度会完全一致。

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