Select2与Twitter Bootstrap 3/Dropdown错误的宽度

Question

我想将select2.js与twitter bootstrap结合使用3.到目前为止,一切正常,但事实上,Drop-Down容器的宽度与select容器本身的宽度不同.

通过调整窗口大小,这个现象出现并消失.

这是一张显示问题的图片

这里是你可以尝试调整大小的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>

我试着找几个小时的解决方案,但我找不到解决这个问题的方法.

感谢你并致以真诚的问候

Answer 1

只需<form>在此处嵌入您的表单,然后告诉您的选择 class="form-control".按照此处的步骤http://getbootstrap.com/css/#forms-horizo​​ntal.

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

Answer 2

jQuery插件select2有一些系列CSS问题Bootstrap3..幸运的是,有一个修复这些问题,看看这个github项目

您需要做的就是添加此css文件或只是将其内容附加到select2.css

感谢Jeff Mold.