如何在引导程序中使用 html 数据列表？答案

【问题标题】：How to use html datalist with bootstrap?如何在引导程序中使用 html 数据列表？
【发布时间】：2018-02-10 16:16:23
【问题描述】：

给定

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

如何将引导 css 应用于此？除了添加class="form-control" 之外，我会以与选择元素相同的方式进行布局？但这没有用。不支持这个标签吗？

【问题讨论】：

尽管这个问题针对的是 Bootstrap 4，但我认为知道 Bootstrap 5 现在支持数据列表很有用：getbootstrap.com/docs/5.0/forms/form-control/#datalists

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

在 Bootstrap 5 中终于提到了数据列表。但是，我不确定这是否意味着它们 BS 支持数据列表。他们没有特殊的类和不一致的注释。详情请参阅https://getbootstrap.com/docs/5.0/forms/form-control/#datalists。

【讨论】：

【解决方案2】：

我无法确认，bootstrap 4 通常不适用于 <input>/<datalist> 元素。基本上，您只需将select 字段引导类应用于input 字段，然后它会获得带有输入功能的选择/下拉列表的外观，例如：

<input list="encodings" value="" class="col-sm-6 custom-select custom-select-sm">
<datalist id="encodings">
    <option value="ISO-8859-1">ISO-8859-1</option>
    <option value="cp1252">ANSI</option>
    <option value="utf8">UTF-8</option>
</datalist>

在最近的 Firefox 上看起来像这样：

【讨论】：

【解决方案3】：

是的，Bootstrap 4 不支持datalist 标签。

所以，如果你想使用它，你必须添加自定义 css。

【讨论】：