更改 Bootstrap 中 Dropdown 多选列表的样式答案

【问题标题】：Change the style of Dropdown multi select list in Bootstrap更改 Bootstrap 中 Dropdown 多选列表的样式
【发布时间】：2018-01-17 23:12:47
【问题描述】：

我有两个选择列表。一种是普通选择列表（标题），另一种是多选列表（选择活动）。问题是多选列表样式与普通样式不同。我尝试了不同的引导类，甚至使用了Inspect 工具来更改多选样式。

正常的选择列表（这是我想为其他选择列表实现的样式，如下面的屏幕截图所示，使用引导程序）。

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

多选列表：

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

我想使用引导程序使多选下拉列表与标题下拉列表相同。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以简单地添加data-style="btn-default"，即使它未包含在 bootstrap-select 的文档中。在引导程序中，它作为 CSS 设置存在。

欲了解更多信息，请访问此链接 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>

【讨论】：