Question

我想显示一个下拉/选择作为输入与bootstrap 4.到目前为止，我在文档中找到的唯一选择是this。哪个有效，但看起来不像引导程序，并且不支持图标，分组和分配。有没有办法让select与bootstrap的下拉功能相匹配？

这样的东西，但只作为各种形式的输入：

<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
        Large button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

有没有人有想法？

Answer 1

样式/格式化select元素的能力通常是有限的，而不仅仅是在Bootstrap中。这就是为什么有第三方插件如https://github.com/silviomoreto/bootstrap-select利用jQuery将现有的select元素转换为＆＃34;样式并为标准选择元素带来额外功能的原因＃34;

您还可以添加一些简单的jQuery，使Bootstrap下拉列表像select元素一样：http://www.codeply.com/go/ganazCDXB5

更新2018年 - Bootstap 4.0.0（稳定）

下拉选择：https://www.codeply.com/go/8bAECfv46k

SelectPicker plugin：https://www.codeply.com/go/zpZOlpB4GS

Multiselect plugin：https://www.codeply.com/go/UeqqALYwsT

Answer 2

如果您使用的是Bootstrap 4，则应该知道Bootstrap 4会删除选择搜索框。现在，您可以使用帮助bootstrap-select.min.css文件添加此功能。链接在下面

首先，您添加以下css和javascript文件。

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

之后，为选择框添加以下代码

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

现在您必须添加javascript代码

<script>
$('.selectpicker').selectpicker();
</script>

bootstrap 4样式选择

2 个答案: