Ghlyphicons außerhalb Formulareingaben und Entfernen von Formularhintergrund

Question

Ich habe ein Formular im Bootstrap und ich habe Glyphicons zu den Eingaben hinzugefügt, aber die Glyphicons erscheinen außerhalb der Eingänge, ich versuchte, Lösungen aus einer ähnlichen Frage, aber nachdem ich das dann die Glyphicons verschwinden .

Ich habe auch eine schöne Fullscreen-Bild auf der Seite, aber wenn ich das Formular hinzugefügt, deckt der weiße Hintergrund den Teil des Bildes, wo das Formular ist. Ich habe versucht, nach einer Lösung zu suchen, aber ich kann nichts finden, bitte helfen Sie.

<style> 
 
body { 
 
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
 
} 
 

 
input.transparent-input{ 
 
    background-color:transparent !important; 
 
    border:none !important; 
 
} 
 

 
form, label, p, h3 { 
 
    color: white !important; 
 
} 
 

 
.full { 
 
background:url(../images/holiday_resort3-1920x1080.jpg) no-repeat center center fixed; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
background-size: cover; 
 
-o-background-size: cover; 
 
} 
 

 
</style> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    </div> 
 
</nav> 
 

 
<form class="form-horizontal"> 
 
    <fieldset> 
 

 
    <!-- Form Name --> 
 
    <legend>Book A Hotel...</legend> 
 

 
    <!-- Search input--> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label" for="searchinput">Search</label> 
 
     <div class="col-md-4"> 
 
     <input id="searchinput" name="searchinput" type="search" placeholder="" class="form-control input-md"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
 
     </div> 
 
    </div> 
 

 
    <!-- Text input--> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label" for="checkindate">Check-in:</label> 
 
     <div class="col-md-2"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
     <input id="checkindate" name="checkindate" type="text" placeholder="" class="form-control input-md"> 
 
     </div> 
 
    </div> 
 

 
</fieldset> 
 
</form> 
 

 
<!-- jQuery --> 
 
<script src="js/jquery.js"></script> 
 

 
<!-- Bootstrap Core JavaScript --> 
 
<script src="js/bootstrap.min.js"></script>

This is what the page looks like

I would like something along these lines instead

Answer 1

müssen Sie die Klasse hinzufügen .input-Gruppe im div Eltern des Eingangs und das Symbol

Html-Code wird wie dies:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    </div> 
</nav> 

<form class="form-horizontal"> 
    <fieldset> 

    <!-- Form Name --> 
    <legend>Book A Hotel...</legend> 

    <!-- Search input--> 
    <div class="form-group"> 
     <label class="col-md-4 control-label" for="searchinput">Search</label> 

     <div class="input-group col-md-4"> 

      <input id="searchinput" name="searchinput" type="search" placeholder="" class="form-control input-md"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
     </div> 
    </div> 


    <!-- Text input--> 
    <div class="form-group"> 
     <label class="col-md-4 control-label" for="checkindate">Check-in:</label> 
     <div class="input-group col-md-2"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
     <input id="checkindate" name="checkindate" type="text" placeholder="" class="form-control input-md"> 

     </div> 
    </div> 



</fieldset> 
</form> 

Working demo