如何在 Bootstrap 4 中的搜索输入中添加图标？
- Linda Hamilton原创
- 2024-12-15 17:13:14592浏览
Bootstrap 4 - 使用图标搜索输入
问题涉及将图标集成到 Bootstrap 4 搜索输入中。出现此问题是因为 Bootstrap 4 不支持 Glyphicons。以下是如何使用各种技术将图标合并到搜索输入中的详细说明：
带有附加的输入组
此技术使用带有图标附加或前缀的输入组。图标放置在输入字段之前或之后。
<br><div> <input class="form-control py-2" type="搜索”值=“搜索”> <span><pre class="brush:php;toolbar:false"><button>
带有输入组文本的输入组
;该技术利用一个输入组图标的输入组文本。 input-group-text 为没有灰色背景的图标提供占位符。
<br><div> <input class=" form-control py- border-right-0 value="search"> <span><pre class="brush:php;toolbar:false"><div>
网格系统（行和列）< /h3>
此技术使用网格系统（行和列）创建带有图标的搜索输入。无装订线用于消除列之间的间距，从而实现无缝布局。
<br><div> <div class="col"> <pre class="brush:php;toolbar:false"><input>
<button>