Die Frage betrifft die Integration eines Symbols in eine Bootstrap 4-Sucheingabe. Das Problem entsteht, weil Bootstrap 4 keine Glyphicons unterstützt. Hier finden Sie eine ausführliche Erklärung, wie Sie mithilfe verschiedener Techniken ein Symbol in die Sucheingabe integrieren können:
Diese Technik verwendet ein Eingabegruppe mit einem Anhang oder einem Voranhang für das Symbol. Das Symbol wird entweder vor oder nach dem Eingabefeld platziert.
<br><div> <input class="form-control py-2" type=" search" value="search"> <span><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>
Diese Technik verwendet eine Eingabegruppe mit Eingabegruppentext für das Symbol. Der Eingabegruppentext bietet einen Platzhalter für das Symbol ohne grauen Hintergrund.
<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Diese Technik nutzt das Rastersystem (Zeile und Spalte), um Erstellen Sie eine Sucheingabe mit einem Symbol. Es werden keine Zwischenräume verwendet, um den Abstand zwischen den Spalten zu eliminieren, was zu einem nahtlosen Layout führt.
<br><div> <div class="col"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input>
<button>
Diese Technik ähnelt der Eingabegruppe mit Anhängen verwendet eine Eingabegruppe mit vorangestellter Eingabegruppe. Das Symbol wird im Präfix vor dem Eingabefeld platziert.
<br><div> <span class="input-group-prepend"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
<button>
Die Auswahl von Die Technik hängt von der gewünschten Optik und Funktionalität ab. Diese Beispiele demonstrieren mehrere Methoden zum Integrieren eines Symbols in eine Sucheingabe mithilfe von Bootstrap 4 und bieten Flexibilität bei Design und Implementierung.
Das obige ist der detaillierte Inhalt vonWie füge ich in Bootstrap 4 ein Symbol zu einer Sucheingabe hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
