twitter-bootstrap 更改 Bootstrap 中下拉多选列表的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48311497/
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
Change the style of Dropdown multi select list in Bootstrap
提问by Mr Nobody
I have two select lists. One is normal select list (Title) and the other is multi selection list (Choose Activities). The problem is that the multi selection list style is different than the normal one. I tried different bootstrap classes and even used the Inspecttool to change the multi selection style.
我有两个选择列表。一个是普通选择列表（Title），另一个是多选列表（Choose Activities）。问题是多选列表样式与普通样式不同。我尝试了不同的引导程序类，甚至使用该Inspect工具来更改多选样式。
The normal select list (This is the style I want to achieve for the other select list as shown in the screen shot below using bootstrap).
普通选择列表（这是我想为其他选择列表实现的样式，如下面的屏幕截图所示，使用引导程序）。
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Title</label>
<select id="txtTitle" class="form-control">
<option value="default">Please Select</option>
<option value="one">One</option>
<option value="two">Two</option>
</select>
</div>
The multi select list:
多选列表：
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Choose Activities</label>
<select id="DDLActivites" data-style="" class="selectpicker form-control" multiple data-max-options="2">
<option>Mustard</option>
<option>Barbecue</option>
</select>
</div>
I want to make the multi select dropdown list same as the title dropdown list using bootstrap.
我想使用引导程序使多选下拉列表与标题下拉列表相同。
回答by Lakindu Gunasekara
You can simply add data-style="btn-default"even though it is not included in the documentation of bootstrap-select. In bootstrap it is there as a css setting.
data-style="btn-default"即使 bootstrap-select 的文档中没有包含它，您也可以简单地添加。在引导程序中，它作为 css 设置存在。
For more information visit this link http://silviomoreto.github.io/bootstrap-select/examples/#button-classes
有关更多信息，请访问此链接 http://silviomoreto.github.io/bootstrap-select/examples/#button-classes
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Title</label>
<select id="txtTitle" class="form-control selectpicker">
<option value="default">Please Select</option>
<option value="one">One</option>
<option value="two">Two</option>
</select>
</div>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Choose Activities</label>
<select id="DDLActivites" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="2">
<option>Mustard</option>
<option>Barbecue</option>
</select>
</div>