Select2与Twitter Bootstrap 3 / 下拉菜单宽度错误

Question

我希望能够在 Twitter Bootstrap 3 中使用 select2.js。目前一切都正常，只是下拉框的容器宽度与选择容器本身不同。

通过调整窗口大小，这种现象会出现和消失。

以下是展示问题的图片： 您可以在 JSFiddle 上尝试调整大小并测试（已在 IE 11 和 FF 26 上进行了测试）。 JSFiddle 以下是代码：

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.4.5/select2.css">

<div class="container"> 
    <div class="row">
        <div class="col-xs-3">
            <select style="width:100%" class="select2">
                <optgroup label="Test-group">    
                    <option>test1</option>
                    <option>test2</option>
                </optgroup>
            </select>
          </div>    
    <div class="col-xs-3">
            <select style="width:100%" class="select2">
                <optgroup label="Test-group">    
                    <option>test1</option>
                    <option>test2</option>
                </optgroup>
            </select>
          </div>
        <div class="col-xs-3">
            <select style="width:100%" class="select2">
                <optgroup label="Test-group">    
                    <option>test1</option>
                    <option>test2</option>
                </optgroup>
            </select>
          </div>
    </div>
</div>

我已经花了几个小时尝试寻找解决方案，但是我无法解决这个问题。

谢谢并致以最好的问候。

- user1895259

---

如果有人和我一样想法，添加 select2-bootstrap.css 似乎没有帮助。(@user: 最好在问题中展示你正在加载的CSS，这样人们就不必依赖于 fiddle.) - T.J. Crowder

谢谢您的提示和尝试。我刚刚添加了使用的CSS文件。 - user1895259

Answer 1

只需像这样使用<form>嵌入您的表单，并告诉您的选择器具有class="form-control"。按照此处的步骤进行操作http://getbootstrap.com/css/#forms-horizontal，即可正确显示您的select2组合框。不要使用style=**。

- Rodrigo Asensio

Answer 2

jQuery插件select2与Bootstrap3存在一些CSS问题。幸运的是，这些问题有解决方法，可以查看此github项目。

您只需要添加此CSS文件或将其内容附加到select2.css中即可。

感谢Jeff Mould提供的帮助。

- ebram khalil

Answer 3

对我来说，只需从选择标签中删除任何额外的样式（内联或类引用）即可解决问题。

例如，以下下拉菜单的宽度是不正确的：

    <select class="select2 col-sm-10">
       <option></option>
       <option>test1</option>
       <option>test2</option>
    </select>

然而，当我从 select 中删除了 col-sm-10 类的引用时，下拉菜单的宽度就正确了：

    <select class="select2">
       <option></option>
       <option>test1</option>
       <option>test2</option>
    </select>

结果看起来像这样：

请注意，如果我也添加 此CSS文件, 下拉框比不进行任何操作要好；如下所示。但我更喜欢从选择中简单地删除所有CSS样式（除了select2）。

- l3x