bootstrap左边一个图片右边一个输入框如何写布局

问题描述

问 题

效果图

以下是HTML结构：

          <div class="col-sm-5">
                <form action="index.php" method="post" name="form">
                    <p class="no-margins"></p>
                    <input name="username" type="text" class="form-control uname" placeholder="用户名" />
                    <input name="password" type="password" class="form-control pword" placeholder="密码" />
                    <div class="m-r-xs m-t m-b">
                        <img src="" height="34" class="col-md-6" alt="验证码">
                        <input name="code" type="text" class="form-control code col-md-6" placeholder="验证码"/>
                    </div>
                    <input type="submit" class="btn btn-success btn-block" name="submit" value="登录">
                </form>
            </div>

样式：

.form-control{display:block;margin-top:15px}
.uname{background:#fff url(../images/user.png) no-repeat 95% center;color:#333}
.pword{background:#fff url(../images/locked.png) no-repeat 95% center;color:#333}
.code{width:100px;background:#fff url(../images/valicode.png) no-repeat 95% center;color:#333}

解决方案

 <div class="form-group form-inline">
     <label for="card" class="control-label col-sm-4">卡号</label>
     <div class="col-sm-5  ">
         <input type="text" class="form-control" id="card" name="cardname"      placeholder="请输入卡号"/>
         <p class="fa fa-user"></p>
     </div>
 </div>          

• 那个图标不是图片，是字体，想你需要下一个字体包 fontawesome

• 这个字体可以改变大小和颜色，比图片好用，很方便

这篇关于bootstrap左边一个图片右边一个输入框如何写布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！