Bootstrap 5中td内input-group按钮组右对齐实现方案问询

一、让Input-Group右对齐且不占满TD宽度 #

Bootstrap 5的input-group默认是width: 100%的flex容器，所以会占满父级td宽度并左对齐。可以通过两步调整：

• 给td添加text-end类，让内部内容右对齐（Bootstrap 5替代旧版text-right）
• 给input-group添加w-auto类，让它根据内容自适应宽度，而非占满整个td

示例代码：

<td class="text-end">
  <div class="input-group w-auto">
    <button class="btn btn-primary">编辑</button>
    <button class="btn btn-danger">删除</button>
  </div>
</td>

如果text-end不生效（比如td有其他flex相关样式），可以给input-group加ms-auto类，强制它在td内靠右：

<td>
  <div class="input-group w-auto ms-auto">
    <button class="btn btn-primary">编辑</button>
    <button class="btn btn-danger">删除</button>
  </div>
</td>

二、优化按钮不换行的样式 #

你手动添加的display: flex;flex-wrap: nowrap;flex-direction: row;完全多余——Bootstrap 5的input-group本身就是默认flex容器，且默认属性就是flex-wrap: nowrap、flex-direction: row，直接删除自定义样式即可。

如果浏览器宽度缩小时按钮仍换行，大概率是按钮内容被压缩导致的，给每个按钮加flex-shrink-0类，防止按钮被压缩：

<td class="text-end">
  <div class="input-group w-auto">
    <button class="btn btn-primary flex-shrink-0">编辑</button>
    <button class="btn btn-danger flex-shrink-0">删除</button>
  </div>
</td>

这样按钮会保持原有宽度，不会被压缩换行，同时input-group的默认flex布局会让它们始终处于同一行。

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