Hoy, el gerente del proyecto me dio un trabajo y me pidió que implementara dicha función: lo que quiero lograr es reducir el cuadro de texto del código de verificación y luego agregar una imagen de código de verificación a la derecha, y en el caso del diseño receptivo, la imagen del código de verificación se puede mantener en la misma línea que el cuadro de texto del código de verificación al acceder al terminal móvil. ¿Cómo hacer esto? Ha sido difícil durante mucho tiempo, y luego encontré la idea de realización. El editor compartirá mis ideas y mi proceso de implementación con usted. Si tiene alguna pregunta, ¡pregúnteles y aprenda y avanza juntos!
Ideas de implementación:
Renderizaciones de implementación
Agregue el código de diseño de la cuadrícula de Bootstrap usted mismo para controlar el diseño bajo diferentes resoluciones.
El único requisito previo para esta implementación es que la altura de su imagen de código de verificación debe ser la misma que la altura del cuadro de entrada (la altura del cuadro de entrada es de aproximadamente 34 px).
Después de eso, será simple. Deje que la imagen del código de verificación se superponga en el cuadro de entrada y use el diseño absoluto para completarla.
PD: Recuerde agregar un valor de izquierda para el relleno al cuadro de entrada (solo mayor que el ancho del código de verificación), de lo contrario bloqueará el texto.
<Syle> #CaptCha {border-radius: 2px; cursor: pointer; posicion: absoluta; z-index: 3; izquierda: 0; top: 0;}#validateCode {padding-left: 110px;} </style> <div> <label para = "Validatecode"> Code de verificación <Small> Click en la imagen a la imagen de la imagen de la verificación </Small> id = "Captcha" src = 'data: image/png; base64, {{captcha :: doimg () [' imgcode ']}}'> <input type = "text" id = "validatecode" name = "ValidAcode" PlaceHolder = "Código de verificación de caracteres de cuatro dígitos"> </piv> </viv>Déjame mostrarle al interrogador mi solución. Este es un sitio web sobre el que estoy escribiendo. El tamaño de la imagen está en línea con la altura del cuadro de entrada. No hay necesidad de cambiar el ancho de entrada. Simplemente deje que la imagen del código de verificación cubra el cuadro de entrada. Luego agregue un valor de acolchado a la izquierda a la entrada. El tamaño es ligeramente más grande que el ancho de la imagen del código de verificación. Es inconveniente responder preguntas en su teléfono. Lo explicaré en detalle cuando regrese.
Lo anterior es el método de implementación del cuadro de texto en Bootstrap que le presenté al reducir el ancho del cuadro de texto y agregar una imagen de código de verificación. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!