Javascript 带有Select2和其他表单控制元素或输入组btn的响应修复输入组

我正在尝试完成文件上传系统的设计： 系统具有初始选择器2；然后，它与一个搜索按钮连接（用于搜索文件）；然后我们有一个输入文本，我在其中显示文件名；在此之后，我需要3个按钮：一个预览，另一个允许我添加更多行，另一个允许我删除它们

但我不能让它看起来像col-sm-12，就像col-sm-6一样

$（“.select2”）。选择2({
主题：“引导”，
占位符：“公共汽车和自助汽车”，
allowClear:是的，
});
.btn文件{
溢出：隐藏；
}
.btn文件输入[类型=文件]{
位置：绝对位置；
排名：0；
右：0；
最小宽度：100px；
最小高度：100%；
字体大小：100px；
文本对齐：右对齐；
过滤器：alpha（不透明度=0）；
不透明度：0；
背景：红色；
游标：继承；
显示：块；
}
.btn文件输入[只读]{
背景色：白色！重要；
光标：文本！重要；
}
.obj文件{
宽度：98%！重要；
身高：100%！重要；
最小高度：计算（100vh-200px）！重要；
溢出：自动！重要；
}
.text文件{
浮子：对！很重要；
宽度：60%！重要；
}

Selec。
Prueba 2最大值带
普鲁巴3号
普鲁巴4号
普鲁巴5号
客车
维斯塔普雷维亚酒店
我已经找到了解决这个问题的方法

在BS 3.X中：


$（“.select2”）。选择2({
主题：“引导”，
占位符：“公共汽车和自助汽车”，
宽度：“自动”，
dropdownAutoWidth:true，
allowClear:是的，
});
.btn文件{
溢出：隐藏；
边界半径：0！重要；
}
.btn文件输入[类型=文件]{
位置：绝对位置；
排名：0；
右：0；
最小宽度：100px；
最小高度：100%；
字体大小：100px；
文本对齐：右对齐；
过滤器：alpha（不透明度=0）；
不透明度：0；
背景：红色；
游标：继承；
显示：块；
}
.btn文件输入[只读]{
背景色：白色！重要；
光标：文本！重要；
}
.text文件{
浮子：对！很重要；
宽度：100%！重要；
}

Selec。
Prueba 2最大值带
普鲁巴3号
普鲁巴4号
普鲁巴5号
客车
维斯塔普雷维亚酒店
当select位于输入组中时，此css修复了溢出文本中的my select2：


。选择2容器{
位置：绝对位置；
}