我正在尝试使用输入组创建一个简单的内联表单,以便在输入之前显示图标.据我所知,我正在关注文档,但表单不按预期显示.
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>
原文地址:https://www.jb51.cc/html/224727.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。