如何在Bootstrap中使用HTML数据列表？

Question

给定

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

如何将Bootstrap CSS应用于此？除了添加之外，我是否会以class="form-control"与select元素相同的方式进行布局？但这没有用。不支持该标签吗？

Answer 1

我无法确认，引导程序4通常不适用于<input>/ <datalist>元素。基本上，您仅将选择字段引导程序类应用于输入字段，然后使用输入功能获得选择/下拉字段的外观，例如：

<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上看起来像这样：

Answer 2

Bootstrap 5 中终于提到了数据列表。但是，我不确定这是否意味着他们支持数据列表。他们没有特殊的课程，也没有不一致的注释。有关更多详细信息，请参阅https://getbootstrap.com/docs/5.0/forms/form-control/#datalists 。