jQuery Select2 with Twitter Bootstrap 3 / Dropdown 错误宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21497529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 with Twitter Bootstrap 3 / Dropdown wrong width
提问by user1895259
I want to use select2.js in combination with twitter bootstrap 3. Everything works fine so far, except the fact, that the Drop-Down container has not the same width as the select container itself.
我想将 select2.js 与 twitter bootstrap 3 结合使用。到目前为止一切正常，除了下拉容器与选择容器本身的宽度不同。
By resizing the window this phenomen appears and disappears.
通过调整窗口大小，这种现象出现和消失。
Here is a picture that shows the issue 
这是显示问题的图片
And here is the jsfiddle where you can try the resizing. (Tested it with IE 11 and FF 26) jsfiddle
这是您可以尝试调整大小的 jsfiddle。（用 IE 11 和 FF 26 测试过） jsfiddle
And here also the code:
这里还有代码：
<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>
I tried to find a solution for hours now, but I can't find a solution for that issue.
我试图找到几个小时的解决方案，但我找不到该问题的解决方案。
Thank you and best regards
感谢你并致以真诚的问候
回答by Rodrigo Asensio
Just embed your form with a <form>like here and tell your select to have a class="form-control". Follow the steps here http://getbootstrap.com/css/#forms-horizontal.
只需<form>在此处嵌入您的表单并告诉您的选择有一个 class="form-control". 按照http://getbootstrap.com/css/#forms-horizontal此处的步骤操作。
This will show your select2 combo correctly. Don't use style=**
这将正确显示您的 select2 组合。不要使用样式=**
回答by ebram khalil
The jQuery plugin select2has some series CSS issues with Bootstrap3.. fortunately, there is a fix to these issues, check out this github project
jQuery 插件select2有一些 CSS 问题系列Bootstrap3......幸运的是，这些问题有一个修复，看看这个 github 项目
All you need to do is to add this css fileor simply append its contents to select2.css
您需要做的就是添加此 css 文件或简单地将其内容附加到select2.css
Credit goes to Jeff Mould.
归功于Jeff Mold。
回答by l3x
For me, simply removing any additional styling (inline or class reference) from the select tag does the trick.
对我来说，只需从 select 标签中删除任何其他样式（内联或类引用）即可。
For example, the width for dropdown for the following was incorrect:
例如，以下下拉菜单的宽度不正确：
<select class="select2 col-sm-10">
<option></option>
<option>test1</option>
<option>test2</option>
</select>
However, when I removed the col-sm-10class reference from select, the dropdown width was correct:
但是，当我col-sm-10从选择中删除类引用时，下拉宽度是正确的：
<select class="select2">
<option></option>
<option>test1</option>
<option>test2</option>
</select>
The result looks like this:
结果如下所示：
Note that if I also add this css file, the dropdown is better than without doing anything; See below. but I prefer to simply remove all css styles (except select2) from select.
请注意，如果我还添加了这个 css 文件，下拉菜单比什么都不做要好；见下文。但我更喜欢简单地从 select 中删除所有 css 样式（select2 除外）。
