Select2 with Twitter Bootstrap 3 / Dropdown 宽度错误答案

【问题标题】：Select2 with Twitter Bootstrap 3 / Dropdown wrong widthSelect2 with Twitter Bootstrap 3 / Dropdown 宽度错误
【发布时间】：2014-02-25 04:16:46
【问题描述】：

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

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

这是一张显示问题的图片

这里是 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>

我花了几个小时试图找到解决方案，但我找不到该问题的解决方案。

谢谢你和最好的问候

【问题讨论】：

如果有人和我有同样的想法，请添加select2-bootstrap.cssdoesn't seem to help。（@user：最好在问题中准确显示您正在加载的 CSS，这样人们就不必依赖小提琴。）
感谢您的提示和尝试。我刚刚添加了使用的 css 文件。

标签： jquery css twitter-bootstrap-3 jquery-select2

【解决方案1】：

只需在您的表单中嵌入<form>，就像这里一样，并告诉您的选择有一个class="form-control"。按照此处的步骤http://getbootstrap.com/css/#forms-horizontal。

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

【讨论】：

【解决方案2】：

jQuery 插件select2 与Bootstrap3 有一些系列CSS 问题。幸运的是，这些问题已得到修复，check out this github project

您需要做的就是添加this css file 或简单地将其内容附加到select2.css

归功于Jeff Mould。

【讨论】：

【解决方案3】：

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

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

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

结果如下：

注意，如果我还加上this css file，下拉总比不做任何事情要好；见下文。但我更喜欢简单地从 select 中删除所有 css 样式（select2 除外）。

【讨论】：