Angular项目input group关联checkbox移动端无法同行显示问题求助

解决方案 #

你遇到的布局错乱核心是两个原因：Bootstrap 4+的.input-group默认开启了flex-wrap: wrap，空间不足时会自动换行；其次表格默认是自动布局，列宽会被内容撑开，你表头设置的9em没有生效。按下面步骤修改即可：

1. 首先给整个表格添加固定布局样式，强制列宽按表头设置生效

/* 给你当前使用的表格添加该样式，建议加自定义类名避免全局污染 */
.compare-table {
  table-layout: fixed;
  width: 100%;
}

2. 修改td的属性，和表头宽度保持一致，避免内容撑宽列

<td
   style="width: 9em; overflow: hidden"
   class="text-wrap"
   >
   <!-- 原有内容保持不变 -->
</td>

3. 替换你之前写的SCSS样式，用弹性盒属性强制不换行，输入框自适应剩余空间：

.input-group {
  /* 强制弹性盒不换行，覆盖Bootstrap默认的换行规则 */
  flex-wrap: nowrap !important;
  .input-group-prepend {
    /* 复选框容器宽度固定不收缩 */
    flex: 0 0 auto;
    .input-group-text {
      /* 减少内边距节省空间，可根据需要调整 */
      padding: 0 6px;
    }
  }
  .form-control {
    /* 输入框自适应剩余所有可用空间 */
    flex: 1 1 auto;
    /* 允许输入框宽度小于内容宽度，避免溢出撑宽父容器 */
    min-width: 0;
    padding: 0 6px;
    /* 移除固定宽度设置，用自适应更适配不同屏幕 */
    width: auto !important;
  }
}

修改后不需要限制输入框宽度，它会自动填充当前列的剩余空间，复选框和输入框始终保持在同一行，桌面端和移动端布局都能保持一致。

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