我正在尝试使用输入组创建一个简单的内联表单,以便在输入之前显示图标.据我所知,我正在关注文档,但表单不按预期显示.
See this JSFiddle,它显示了问题.我假设
it should be displayed like this(只有当然的图标).这怎么可以解决？
我的代码：
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
解决方法
我已经这样做了：
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
