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

實現(xiàn)思路：

實現(xiàn)效果圖

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

這樣實現(xiàn)唯一的前提條件就是你的驗證碼圖片高度需要和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>&nbsp;&nbsp;點擊圖片刷新驗證碼</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中文本框的寬度變窄并且加入一副驗證碼圖片的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: