Bootstrap响应式表格内输入框宽度过窄问题及布局方案咨询

小屏输入框过度收缩修复方法 #

• 给表格难度列设置最小宽度：为Easy/Medium/Hard/Very Hard对应的<th>标签添加自定义样式，设置min-width: 120px，保证列宽不会被无限制压缩，输入框可获得足够展示空间。
• 输入框添加最小宽度限制：给所有输入框添加样式min-width: 60px，兜底保证输入内容和校验图标可完整展示，避免被压缩到内容不可见。
• 固定表格布局：给<table>标签添加样式table-layout: fixed，结合列宽比例分配（如仓库列占20%、题型列占20%、四个难度列各占15%），避免表格自动布局下的列宽乱跳问题。
• 适配校验类占位：Bootstrap的.is-valid/.is-invalid类会在输入框右侧加载校验图标，可适当调大输入框的padding-right和最小宽度，避免图标遮挡输入内容。

更优布局替代方案 #

表格布局在数据行数较多时小屏体验较差，可改用「卡片+响应式栅格」的布局方案，核心实现逻辑如下：

1. 每个「仓库+单类题型」的组合对应一张独立卡片，卡片头部展示仓库名称和题型信息
2. 卡片内部用Bootstrap栅格承载四个难度的输入项，小屏自动切换为每行2个输入项，超小屏可切换为纵向排列，无需横向滚动即可完成填写
   核心代码示例：

.bg-orange {
  background-color: darkorange;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h5>Pick Questions</h5>
  <hr>
  <!-- 单张卡片示例，可复制扩展多个仓库/题型组合 -->
  <div class="card mb-3">
    <div class="card-header">
      <span class="font-weight-bold">Unit 1</span>
      <span class="ml-3">Multiple Choice Questions</span>
    </div>
    <div class="card-body row">
      <div class="col-6 col-md-3 mb-2">
        <label class="small text-muted d-block">Easy</label>
        <input class="form-control" value="11">
        <span class="badge badge-success mt-1">36</span>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <label class="small text-muted d-block">Medium</label>
        <input class="form-control is-valid" value="30">
        <span class="badge badge-warning mt-1">38</span>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <label class="small text-muted d-block">Hard</label>
        <input class="form-control is-invalid" value="100">
        <span class="badge text-light bg-orange mt-1">36</span>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <label class="small text-muted d-block">Very Hard</label>
        <input class="form-control" value="12">
        <span class="badge badge-danger mt-1">40</span>
      </div>
    </div>
  </div>
</div>

该方案的优势：

• 响应式适配更灵活，小屏无横向滚动，填写效率更高
• 信息聚合度更高，不会出现多行长表格下的仓库、题型和输入框对应错误问题
• 扩展性更强，新增仓库/题型只需要新增对应卡片即可，维护成本更低

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