twitter-bootstrap 使引导选择响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28675285/
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
Make bootstrap-select responsive
提问by demo
I have search control where i add textBox, select and button.
我有搜索控件，可以在其中添加文本框、选择和按钮。
<div class="col-md-10">
<div class="row">
<div id="Search_Widget_tr3" class="input-group col-md-12">
<input type="text" class="form-control" placeholder="enter title" id="homeSearchInput"/>
<div class="input-group-btn clearfix">
<select class="selectpicker" multiple title='Platforms' data-container="body" data-count-selected-text="Platforms" data-selected-text-format="count>0" data-style="btn btn-default" data-allOptionIsSelected="false">
<option value="All">All Platforms</option>
<option value="Mobile Phone;Tablet;Windows Phone;PlayStation Certified Device;Windows 8 App;PlayStation Mobile">Mobile App/Tablet</option>
<option value="Nintendo DS;Nintendo DSi;Nintendo 3DS">Nintendo DS/DSi/3DS</option>
<option value="PlayStation 3">PlayStation 3</option>
<option value="PlayStation 4">PlayStation 4</option>
<option value="PSP;PS Vita">PlayStation Vita/PSP</option>
<option value="Wii">Wii</option>
<option value="Wii U">Wii U</option>
<option value="Linux;Macintosh;PC DVD;PC DVD-ROM;Windows CE;Windows PC;Windows 8 App">Windows/Mac</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Xbox One">Xbox One</option>
<option value="3DO;Atari Jaguar;Atari Lynx;Cable Box;CDI;Dreamcast;DVD;Game Boy;Game Boy Advance;Game Boy Color;Game Gear;Game Wave(Custom DVD gaming platform);Game Cube;Gizmondo;Hyperscan;iPod;N-Gage;Neo Geo Pocket Color;Nintendo;Nintendo 64;Nintendo Game Boy;NUON;Online;Other;Palm Pilot;PDA(Palm, Win CE, etc.);PlayStation&2FPS one;PlayStation 2;Plug-and-Play;Pocket Arcade;Pocket PC;Pokemon Mini;Sega 32x;Sega CD;Sega Dreamcast;Sega Genesis;Sega Pico;Sega Pocket Arcade;Sega Saturn;Super Nintendo;VG Pocket;Virtual Boy;Web Browser;Web Site;Web TV;Xbox;Zodiac;Firefox">Other Platforms</option>
</select>
<button class="btn btn-default dropdown-toggle click-search" type="button" aria-expanded="false">
Search <span class="glyphicon glyphicon-search"></span>
</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div> </div>
Problem: I can't make the <select>responsive; it's width is fixed.
问题：我无法做出<select>响应；它的宽度是固定的。
When i want to wrap it in some container and set col-md-5to this wrapper then i lost rounded corners between input and select (I don't want to add some new styles only for make corners rounded)
当我想将它包装在某个容器中并设置col-md-5为这个包装器时，我在输入和选择之间丢失了圆角（我不想添加一些新样式仅用于使角变圆）
Here live example
这是现场示例
回答by apprentice
simple solution: add class form-controlto the select element
简单的解决方案：将类添加form-control到选择元素
回答by NateW
I looked in the css to see what was "holding" the select box open and found that it was set to 220px width.
我查看了 css 以查看什么是“保持”选择框打开，发现它被设置为 220px 宽度。
If you add this to your custom css it should work fine:
如果您将此添加到您的自定义 css 中，它应该可以正常工作：
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: auto;
}
JS Fiddle: http://jsfiddle.net/m2y83djy/1/
JS小提琴：http: //jsfiddle.net/m2y83djy/1/
