我在bootstrap中有一个表单,我在输入中添加了glyphicons,但是glyphicons出现在输入之外,我尝试应用类似问题的解决方案,但在我这样做之后,glyphicons消失了。
我在页面上也有一个漂亮的全屏图像,但是当我添加表单时,它的白色背景覆盖了表单所在的图像部分。我试过寻找解决方案,但我找不到任何东西,请帮忙。
<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>
&#13;
答案 0 :(得分:0)
您必须在输入的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>