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 交通频道 作文范文 端午节短信祝福语2013 泰兴路上的元宵“风景”_元宵节作文800字 一分钟自我介绍的通用模板 生活就像一杯水作文700字 暑期社会实践活动个人总结 乡2016年工作总结 别被职场忙碌绑架了 生于动乱,活于平淡 谁为你遮挡心中的雨点 杰。 地球总有累的一天 一只流浪狗 关注两会,关注民生--团日活动计划书 销售动员大会发言稿 禁止向青少年出售香烟倡议书 她是什么 【封神演義】 土建资料员工作程序 第一学期语文教研组个人工作总结_个人工作总结 小学五年级作文750字:我最敬佩的奥运健儿 热子祖国作文1200字 战争2——突然袭击 优雅的好句子 冥火 工程造价师自我介绍 这个胆小鬼是谁?作文450字 段考 为妈妈泡杯茶 齐凤皇衔书伎辞 小学六年级作文550字:挑粪工 关于春节的作文范文700字:浓浓的年味 我学雷锋作文 唯一的心灵简约 土木工程专业 自荐信范文 雨后大森林里的音乐会 铭记国耻 自强不息 郊庙歌辞。汉宗庙乐舞辞。灵长舞 游木兰草原作文800字 疏远反义词_疏远反义词是什么_疏远造句 雪碧瓶奇遇记 学习别人 成就自己 假后 描写春天柳树的段落 爸爸教育我要坚强 工程技术研究中心总结汇报材料 小学学困生转化计划 狗的坏毛病作文200字 此人生 仅此一次 等一场风花雪夜 严肃又愉快的春游 描写“春”的古诗

Copyright © 2016 phpStudy |