Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
作者：mrr 发布时间：2024-04-16 08:48:57
标签：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中文本框的宽度变窄并且加入一副验证码图片的实现方法网站的支持！
0
投稿猜你喜欢
- 为什么需要线程池呢？ 设想一下，如果我们使用有任务就开启
1. lock互斥锁知识点：lock.acquire()# 上锁lock.release()# 解锁#同一时间允许一个进程上一把锁 就是Lo- 本文实例讲述了pymongo为mongodb数据库添加索引的方法。分享给大家供大家参考。具体实现方法如下：from pymongo impo
- 大家都知道，在SQL脚本中设置多字段做关键字相对比较简单，例：primary key(id1,id2) ,但用脚本建数据库就比较麻烦了。那么
- 本章的前面讨论如何使用SQL向一个表中插入数据。但是，如果你需要向一个表中添加许多条记录，使用SQL语句输入数据是很不方便的。幸运的是，My
- 有些框架本身就支持多配置文件，例如Ruby On Rails，nodejs下的expressjs。python下的Flask虽然本身支持配置
- 您是否知道 OpenCV 具有执行行人检测的内置方法？OpenCV 附带一个预训练的 HOG + 线性 SVM 模型，可用于在图像和视频流中
- 我们经常会用到表格数据，在做表格的时候，一般都喜欢隔行变色，使表格表现数据的时候非常的清晰。如图，我设计的一个表格表现的样式：在网上找到一个
- 1、类变量、实例变量概念类变量：类变量就是定义在类中，但是在函数体之外的变量。通常不使用self.变量名赋值的变量。类变量通常不作为类的实例
- 前言写过的这些脚本有一个共性，都是和web相关的，总要用到获取链接的一些方法，累积不少爬虫抓站的经验，在此总结一下，那么以后做东西也就不用重
- 我就废话不多说了，直接 上代码吧！import kafka.api.PartitionOffsetRequestInfo;import ka
- 前言生成器generator生成器的本质是一个迭代器(iterator)要理解生成器,就要在理解一下迭代,可迭代对象,迭代器,这三个概念Py
- 大家一定使用过 phpmyadmin 里面的数据库导入，导出功能，非常方便。但是在实际应用中，我发现如下几个问题：1、数据库超过一定尺寸，比
- 分区视图联接来自一组成员的水平分区数据，使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 在运维过程中，经常需要读取mysql的结果输出并进行响应的处理，这节介绍如何用Python读取mysql结果表并进行相应的整理。进行mysq
- 前言因为一直在几个平台发文章，发现有些平台并不会检测文章中的图片是否会包含二维码，但是其中也有平台会去检测，所以就去研究了一下python如
- python安装pywifi1.Windows安装：在Dos窗口中输入以下命令：pip install pywifi如果找不到pip命令，那
- 数独规则数独游戏，经典的为9×9=81个单元格组成的九宫格，同时也形成了3×3=9个小九宫格，要求在81个小单元格中填入数字1~9，并且数字
- 在这个情人节前夕，我把现任对象回收掉了，这段感情积攒了太多的失望，也给了我太多的伤害，所以我看到这个活动的第一反应是拒绝的。然而人生嘛，最重
- 1 前言很多程序都要求用户输入某种信息，程序一般将信息存储在列表和字典等数据结构中。用户关闭程序时，就需要将信息进行保存，一种简单的方式是使
