使引导程序选择响应

我有搜索控制，我添加文本框，选择和按钮。使引导程序选择响应

<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这种包装的话，我失去了输入和选择之间的圆角（我不想增加一些新的风格只为圆润边角化妆）

这里live example

来源

2015-02-23 demo

你为什么不能只需添加圆角？ – charlietfl 2015-02-23 14:10:16

我查看了css，看看什么是“保持”选择框打开，发现它被设置为220px宽度。

如果您添加到您的自定义CSS它应该很好地工作：

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

JS小提琴：http://jsfiddle.net/m2y83djy/1/

来源

2015-02-23 15:10:33 NateW

我提供了百分比宽度，因为我有更多的10个选择在一个单一的页面，所以他们至少有相同的宽度。 – Naeem 2016-08-15 15:25:27

简单的解决办法：增加form-control类选择元素

来源

2017-05-13 10:02:33 apprentice

使引导程序选择响应

回答

相关问题