Today, the project manager just gave me a job to implement this feature: to achieve the Verification Code text box to narrow a little, and then the right to add a copy of the code picture, and in response to the layout of the mobile side when accessing the code picture can keep and verify the Code text box on the same line, this How to do? Hard for a long time, and then found the realization of ideas, the following small series of my thoughts and the realization of the process to share to everyone, have questions welcome to propose, common learning progress!
Realize the idea:
Implementation of the effect diagram
Add bootstrap Grid layout code to the inside of yourself to control the arrangement under different resolutions.
The only prerequisite for this is that your verification code picture height needs to be the same as the height of the input box (the height of the input box is about 34px).
After the simple, so that the verification code pictures overlap in the input box above, the use of absolute layout can be completed.
PS: Remember to add a padding-left value to the input box (slightly larger than your verification code width), otherwise it will block the text.
<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" > Verification Code
< small> Click Picture Refresh Verification Code </small>
</label>
<div class= "Input-group" >
<input type= ' text ' class= ' Form-control "
id=" Validatecode "name=" Validatecode "
placeholder=" four-bit character verification Code ">
</div>
</div>
To the main topic to see my solution, this is I wrote a website, the size of the picture is the height of the input box, no need to change the input width, so that the verification code pictures cover the input box, and then add a padding-left value to input, slightly larger than the size of the verification code picture width can , the mobile phone answer is not convenient, go back to elaborate.
The above is a small set to introduce the bootstrap of the Chinese text box to narrow the width and add a copy of the verification code picture to achieve the method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!