【问题标题】: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" 之外,我会以与选择元素相同的方式进行布局?但这没有用。不支持这个标签吗?

【问题讨论】:

标签: twitter-bootstrap bootstrap-4


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    我无法确认,bootstrap 4 通常不适用于 &lt;input&gt;/&lt;datalist&gt; 元素。基本上,您只需将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。

      【讨论】:

        猜你喜欢
        • 2019-07-01
        • 2018-10-08
        • 1970-01-01
        • 2022-11-16
        • 1970-01-01
        • 1970-01-01
        • 2017-02-15
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多