Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法


今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天,后来找到了实现思路,下面小编把我的想法及实现过程分享给大家,有问题欢迎提出,共同学习进步!

实现思路:

实现效果图

自己往里面加入bootstrap的栅格布局代码,控制在不同分辨率下面的排布情况。

这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框的高度大概是34px)。

之后就简单了,让验证码图片重叠在input框上面,使用绝对布局就可以完成。

PS:记住要给input框加上一个padding-left值(略微大于你的验证码宽度即可),不然会挡住文字。

<style>
#captcha {
border-radius: 2px;
cursor: pointer;
position: absolute;
z-index: 3;
left: 0;
top: 0;
}

#validateCode {
padding-left: 110px;
}
</style>
<div class="form-group col-md-6">
<label for="validateCode">验证码
<small>  点击图片刷新验证码</small>
</label>
<div class="input-group">
<img id="captcha"
src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'>
<input type="text" class="form-control"
id="validateCode" name="validateCode"
placeholder="四位字符验证码">
</div>
</div>

给题主看看我的解决办法,这是我在写的一个网站,图片的大小是契合Input框的高度的,无需更改input宽度,让验证码图片遮住input框即可,然后给input加一个padding-left值,大小略大于验证码图片宽度即可,手机答题不方便,回去再细说。

以上所述是小编给大家介绍的Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!



相关阅读:
Oracle开发之窗口函数
win10关闭防火墙后如何关闭通知?win10关闭防火墙后总是弹出通知图文解决办法(两种)
ajax异步回调函数中给外部变量赋值的问题探讨
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
javascirpt实现2个iframe之间传值的方法
jquery 判断滚动条到达了底部和顶端的方法
C#中struct和class的区别详解
Linux中6个有趣的终端工具介绍
Linux安装完mysql后提示错误无法登陆mysql怎么办?
如何设置Linux桌面环境 实现HiDPI显示支持的方法
win8怎么加载语言包实验报告?
在CentOS 6.3中安装与配置JDK-7
C#中的事务用法实例分析
最简单的tab切换实例代码
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 给老师的一封信作文450字 在校学生社团联合会换届仪式上的发言 昨夜星辰昨夜雨 感恩的心作文300字 照搬应急预案,有人需对此负责 下江南向夔州 赏识你的孩子读后感 我和七七的那些事 行客——旅途是我的归宿作文500字 同学 妈妈夸我真聪明作文300字 又是一年财神节 安监局个人述职述廉述德报告 伤感句子大全 等一等,请再等我十年 安监局2011年度监管执法工作计划 乡党委副书记2004述职报告 幻想中的毕业 百度李一男:CTO不再默不作声 在家赚钱不误,12个适合家庭创业的好项目 学习《之江心语》心得感想 食物的旅行作文300字 入职以来个人工作总结 我和书本有个约定作文 小学英语作文:我们的房子(Our house) 和书包谈判作文 初春的思绪 《从空中看北京》观后感_关于介绍北京的小学生观后感作文800字 小学五年级作文600字:假如我是一个小雨滴 科学技术处2016年上半年工作总结 *公司在双拥工作会议上的发言 梦里。 王老师,一位令我难忘的老师作文900字 2012年银行柜员个人总结-个人工作总结 感叹一草山名变 小学六年级作文600字:我与大自然零距离 《最后一片藤叶》课文全解(转载)(会员上传) 组织部干部科个人工作总结-个人工作总结_个人工作总结 人的一生就像一趟长途旅行 你比她坚强,她更需要我 小学六年级作文600字:过年啦 申报节能管理先进集体材料 夜的洗礼 安住当下,珍惜每一刻 我心伤悲,莫知我哀作文500字 叹韩信 小学三年级作文250字:我爱故乡的梨(转载) 小学生一年级作文:跑步比赛 “国际贸易实务”课程实践教学模式探讨 小学四年级作文400字:洗车店带给我们的启示

Copyright © 2016 phpStudy |