使bootstrap-select具有响应式设计

Question

我有一个搜索控件，其中包括文本框、选择框和按钮。

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

问题：我无法使<select>具有响应性；它的宽度是固定的。

当我想将其包装在某个容器中并将col-md-5设置为该包装器时，我失去了输入和选择之间圆角的效果（我不想添加一些新样式只是为了使角落变圆）。

这里是实时示例。

- demo

---

为什么你不只是把圆角加回去呢？ - charlietfl

Answer 1

简单解决方案：在选择元素中添加 form-control 类。

- apprentice

Answer 2

我查看了CSS文件，发现“保持”选择框打开的属性被设置为220px宽度。

如果您将此添加到自定义CSS中，应该可以正常工作：

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: auto;
}

JS Fiddle: http://jsfiddle.net/m2y83djy/1/

- NateW

---

我使用百分比提供了宽度，因为在单个页面中有超过10个选择器，所以它们至少具有相同的宽度。 - Muhammad