How to narrow the text box width in Bootstrap and add a verification code image,

How to narrow the text box width in Bootstrap and add a verification code image,

Today, the project manager just handed over a job and asked me to implement this function: the verification code text box should be narrowed a bit, and a verification code image should be added to the right side, in addition, the verification code image can be kept in the same line as the verification code text box during mobile access in a responsive layout. How can this problem be solved? It was difficult for half a day. Later, I found the implementation idea. The following small series will share my thoughts and implementation process with you. If you have any questions, please join us to learn and make progress!

Implementation ideas:

Implementation

Add the bootstrap grid layout code to it to control the layout under different resolutions.

The only prerequisite for achieving this is that the height of your verification code image must be the same as that of the input box (the height of the input box is approximately 34px ).

Then it's easy. Let the verification code picture overlap in the input box and use the absolute layout.

PS: Remember to add a padding-left value to the input box (slightly greater than the width of your Verification Code). Otherwise, the text will be blocked.

<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 the picture to refresh the Verification Code </small> </label> <div class = "input-group">  <input type = "text" class = "form-control" id = "validateCode" name = "validateCode" placeholder = "four-character Verification Code "> </div>

Show me the solution for the subject. This is a website I am writing. The image size fits the height of the Input box. You do not need to change the input width so that the verification code image can cover the input box, then add a padding-left value to the input. The size is slightly greater than the image width of the Verification Code. It is inconvenient for the mobile phone to answer questions.

The above section describes how to narrow the text box width in Bootstrap and add a verification code image. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!