Jquery 使用Twitter引导3/下拉菜单选择2宽度错误

我想将select2.js与twitterbootstrap3结合使用。 到目前为止，一切正常，除了下拉容器的宽度与选择容器本身的宽度不同这一事实

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

下面是一张显示问题的图片

这里是jsfiddle，您可以在这里尝试调整大小。（使用IE 11和FF 26进行测试）

这里还有代码：

<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>

测试1
测试2
测试1
测试2
测试1
测试2

我花了好几个小时试图找到一个解决办法，但我找不到解决这个问题的办法

---

谢谢您并致以最诚挚的问候

只需在您的表单中嵌入一个类似于此处的

，并告诉您的选择拥有一个

class=“form control”

。按照这里的步骤操作

---

这将正确显示select2组合。不要使用style=**

jQuery插件

select2

在

Bootstrap3

中存在一些CSS问题。。幸运的是，这些问题已经解决了

您只需添加或简单地将其内容附加到

select2.css

---

这要归功于。

对我来说，只需从select标记中删除任何附加样式（内联或类引用）就可以了

例如，以下内容的下拉列表宽度不正确：

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

结果如下所示：

请注意，如果我还添加了，则下拉列表比不执行任何操作要好；见下文。但我更喜欢简单地从select中删除所有css样式（select2除外）。

---

如果有人有与我相同的想法，请添加

select2 bootstrap.css

。（@user:最好在问题中准确显示您正在加载的CSS，这样人们就不必依赖小提琴了。）谢谢您的提示和尝试。我刚刚添加了使用的css文件。

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