表单输入之外的 Ghlyphicons 和删除表单背景答案

【问题标题】：Ghlyphicons outside form inputs and removing form background表单输入之外的 Ghlyphicons 和删除表单背景
【发布时间】：2016-11-26 21:11:49
【问题描述】：

我在引导程序中有一个表单，我已将字形图标添加到输入中，但字形图标出现在输入之外，我尝试应用类似问题的解决方案，但在我这样做之后，字形图标消失了。

我在页面上也有一个漂亮的全屏图像，但是当我添加表单时，它的白色背景覆盖了表单所在的图像部分。我已经尝试寻找解决方案，但我找不到任何东西，请帮助。

<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

【问题讨论】：

标签： html css twitter-bootstrap glyphicons

【解决方案1】：

您必须在输入的 div 父级和图标中添加类 .input-group

Html 代码变成这样：

<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

【讨论】：