修复含Select2的响应式Input-group，适配col-sm-12布局问题

嘿，我看你遇到了布局适配的问题——在col-sm-6里显示正常，但切换到col-sm-12就出问题，还有中间的只读输入框没填满空间。咱们来调整一下代码，让它在不同宽度下都能完美适配，同时让输入框占满中间的可用空间。

修改后的完整代码 #

HTML部分

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.9/select2-bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<div class="form-group">
  <!-- 可以切换col-sm-6或col-sm-12测试 -->
  <div class="col-sm-12">
    <div class="input-group select2-bootstrap-append">
      <!-- Select2组件 -->
      <select class="form-control select2">
        <option>Selec.</option>
        <option>Prueba 2 max with</option>
        <option>Prueba 3</option>
        <option>Prueba 4</option>
        <option>Prueba 5</option>
      </select>
      
      <!-- 文件搜索按钮 -->
      <span class="input-group-btn">
        <span class="btn btn-primary btn-file">
          Buscar <i class="fas fa-file-alt"></i>
          <input id="i_file_1" type="file" name="i_file_1" accept="application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required>
        </span>
      </span>
      
      <!-- 只读文件名输入框 -->
      <input type="text" class="form-control text-file" name="text_file_1" readonly>
      
      <!-- 操作按钮组 -->
      <span class="input-group-btn">
        <span class="btn btn-info btn-disabled view-doc btn-view " data-toggle="modal" data-target="#modal-info-i_file_1" disabled>Vista Previa</span>
        <span class="btn btn-info"><i class="fas fa-plus-square"></i></span>
        <span class="btn btn-info"><i class="fas fa-minus-square"></i></span>
      </span>
    </div>
  </div>
</div>

CSS部分

.btn-file {
  overflow: hidden;
  position: relative;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  opacity: 0;
  cursor: pointer;
}

/* 只读输入框样式调整 */
.text-file {
  flex: 1;
  width: auto !important;
  float: none !important;
}

.obj-file {
  width: 98% !important;
  height: 100% !important;
  min-height: calc(100vh - 200px) !important;
  overflow: auto !important;
}

JS部分

$(".select2").select2({
  theme: "bootstrap",
  placeholder: "Buscar y Selecionar",
  allowClear: true,
});

关键改动说明 #

1. 自适应只读输入框：给.text-file添加flex: 1，并移除固定宽度和浮动样式，让它自动填充input-group内的剩余空间，不管父容器是col-sm-6还是col-sm-12都能完美适配。
2. 优化文件按钮布局：给.btn-file添加position: relative，确保内部的文件输入框定位正确，避免在宽容器中出现偏移。
3. 调整input-group结构：把Select2组件直接放在input-group下，不再嵌套额外的input-group-btn，让Bootstrap的原生布局逻辑更好地发挥作用，避免元素排列错乱。
4. 统一操作按钮组：将三个操作按钮放在同一个input-group-btn内，保证它们在一行内整齐排列，不会出现溢出或错位。

现在你可以切换col-sm-6和col-sm-12测试布局，整个组件会自适应宽度，只读输入框也会填满中间的空白区域啦！

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