如何在 Bootstrap 4 和 5 中添加图标到搜索输入？

使用 Icon Bootstrap 搜索输入

Bootstrap 在版本 4 中不再支持 Glyphicons，因此想要向搜索输入添加图标的用户必须找到替代方案方法。

Bootstrap 5 Beta（2021 年）更新）

<div class="input-group">
    <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4（原始解决方案）

使用 Bootstrap 4 输入组元素：

<div class="input-group col-md-4">
    <input class="form-control py-2" type="search" value="search">

内部输入边框：

<div class="input-group col-md-4">
    <input class="form-control py-2 border-right-0 border" type="search" value="search">

无背景的输入组文本：

<div class="input-group">
    <input class="form-control py-2 border-right-0 border" type="search" value="search">

无装订线间距的网格（行>列） :

<div class="row no-gutters">
    <div class="col">
        <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

前置图标：

<div class="input-group">
    <span class="input-group-prepend">
        <div class="input-group-text bg-transparent border-right-0">
            <i class="fa fa-search"></i>
        </div>
    </span>
    <input class="form-control py-2 border-left-0 border" type="search" value="...">

验证图标：

<div class="input-group is-invalid">
    <input class="form-control" type="search" value="">

以上是如何在 Bootstrap 4 和 5 中添加图标到搜索输入？的详细内容。更多信息请关注PHP中文网其他相关文章！