如何让表格单元格内的input group完整显示且不发生换行？

问题原因 #

出现换行主要有两个原因：

• Bootstrap框架的input-group组件默认开启了flex-wrap: wrap属性适配小屏幕，可用空间不足时内部元素就会自动换行。
• 你设置的全局div padding规则会挤压input-group的可用空间，进一步触发换行。

解决方法 #

步骤1：给目标列添加专属标识（方便精准控制样式不污染其他元素）

修改表格表头的Projects列，增加自定义类：

<th class="col-projects">Projects</th>

如果要兼容低版本浏览器（不支持:has选择器），可以给对应td也加个类：

<td class="project-cell">
  <div class="input-group p-0">
    <!-- 原有select和button内容 -->
  </div>
</td>

步骤2：添加专属CSS规则

在你的自定义样式里加入以下代码：

/* 控制Projects列的单元格不折行，设置最小宽度避免元素被挤压过窄 */
#inspireTable .col-projects,
#inspireTable .project-cell {
  white-space: nowrap;
  min-width: 220px; /* 可以根据你的实际需求调整数值 */
}

/* 覆盖全局div的padding影响，禁止input-group换行 */
#inspireTable .input-group.p-0 {
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* 可选：让下拉框自适应剩余宽度，体验更好 */
#inspireTable .projectSelect {
  flex: 1 1 auto;
  min-width: 0;
}

优化建议 #

• 不要使用div { padding: 0.5rem 0; }这种全局元素选择器，会影响页面所有div元素，极易引发样式冲突。建议给需要该padding的元素单独加自定义类，比如.content-item { padding: 0.5rem 0; }，仅给对应元素加这个类即可。
• 外层已经加了table-responsive类，天然支持横向滚动，所以强制列不折行的方案是合理的，移动端也可以通过横向滚动操作，不会有体验问题。
• 如果后续下拉框的选项数量变多，可以考虑引入带搜索功能的下拉组件，提升选择效率。

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