Bild neben ein Eingabefeld setzen mit Bootstrap

Question

Ich möchte ein Bild neben und Eingabefeld mit Bootstrap setzen. ich möchte meine Ausgabe wie sein: `

aber mit dem folgenden Code, den ich bekommen

<div class="form-group row"> 
     <label for="inputTitle" class="col-sm-2 col-form-label">Title</label> 
     <div class="col-sm-10"> 
<span class="glyphicon glyphicon-phone"></span> 
     <input type="title" class="form-control" id="inputTitle" > 
     </div> 
    </div> 

Answer 1

Die form-control Klasse wird Ihre Eingabe 100% breit machen, das heißt, es wird auf die nächste Zeile fließen. Zusätzlich wird es als block Element angezeigt.

Wenn ich Sie wäre, ich mit input groups stattdessen aussehen würde, ist dies ein schöner ordentlich Weg, um die gleiche Wirkung zu erzielen:

Auch Sie Ihren Texteingabe eine Art title gegeben haben, die nicht gültig ist. Es ist wahrscheinlich nur ein text Eingang.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="input-group"> 
 
    <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span> 
 
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
 
</div>

Answer 2

ich denke, das es

tun sollte

<div class="form-group"> 
    <label class="control-label">Title</label> 
    <div class="input-group"><span class="input-group-addon"></span> 
      <input type="text" class="form-control"> 
    </div> 
</div>