如何在 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>
網格系統（行和列）
此技術使用網格系統（行和列）建立帶有圖示的搜尋輸入。無裝訂線用於消除列之間的間距，從而實現無縫佈局。
<br><div> <div class="col"> <pre class="brush:php;toolbar:false"><input>
<button>