Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法

更新時(shí)間：2016年06月23日 10:31:44 投稿：mrr

這篇文章主要介紹了Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

今天項(xiàng)目經(jīng)理剛交給一個(gè)活兒，要我實(shí)現(xiàn)這樣一個(gè)功能：要實(shí)現(xiàn)的是驗(yàn)證碼文本框變窄一點(diǎn)，然后右邊加入一副驗(yàn)證碼圖片，并且在響應(yīng)式布局的情況下在移動(dòng)端訪(fǎng)問(wèn)的時(shí)候驗(yàn)證碼圖片能保持和驗(yàn)證碼文本框在同一行，這個(gè)怎么做？難為了半天，后來(lái)找到了實(shí)現(xiàn)思路，下面小編把我的想法及實(shí)現(xiàn)過(guò)程分享給大家，有問(wèn)題歡迎提出，共同學(xué)習(xí)進(jìn)步！

實(shí)現(xiàn)思路：

實(shí)現(xiàn)效果圖

自己往里面加入bootstrap的柵格布局代碼，控制在不同分辨率下面的排布情況。

這樣實(shí)現(xiàn)唯一的前提條件就是你的驗(yàn)證碼圖片高度需要和input框的高度一樣(input框的高度大概是34px)。

之后就簡(jiǎn)單了，讓驗(yàn)證碼圖片重疊在input框上面，使用絕對(duì)布局就可以完成。

PS:記住要給input框加上一個(gè)padding-left值(略微大于你的驗(yàn)證碼寬度即可)，不然會(huì)擋住文字。

<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">驗(yàn)證碼
<small>&nbsp;&nbsp;點(diǎn)擊圖片刷新驗(yàn)證碼</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="四位字符驗(yàn)證碼">
</div>
</div>

給題主看看我的解決辦法，這是我在寫(xiě)的一個(gè)網(wǎng)站，圖片的大小是契合Input框的高度的，無(wú)需更改input寬度，讓驗(yàn)證碼圖片遮住input框即可，然后給input加一個(gè)padding-left值，大小略大于驗(yàn)證碼圖片寬度即可，手機(jī)答題不方便，回去再細(xì)說(shuō)。

以上所述是小編給大家介紹的Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: