Aujourd'hui, le chef de projet vient de me donner un emploi et m'a demandé d'implémenter une telle fonction: ce que je veux réaliser, c'est réduire la zone de texte du code de vérification, puis ajouter une image de code de vérification à droite, et dans le cas de la mise en page réactive, l'image du code de vérification peut être conservée sur la même ligne que la zone de texte du code de vérification lors de l'accès au terminal mobile. Comment faire cela? Cela a été difficile depuis longtemps, et plus tard, j'ai trouvé l'idée de réalisation. L'éditeur partagera avec vous mes idées et mon processus de mise en œuvre. Si vous avez des questions, veuillez leur poser et apprendre et progresser ensemble!
Idées de mise en œuvre:
Rendu de mise en œuvre
Ajoutez vous-même le code de mise en page de la grille de bootstrap pour contrôler la disposition sous différentes résolutions.
La seule condition préalable à cette implémentation est que la hauteur de votre image de code de vérification doit être la même que la hauteur de la zone d'entrée (la hauteur de la boîte d'entrée est d'environ 34px).
Après cela, ce sera simple. Laissez l'image de code de vérification se chevaucher dans la zone d'entrée et utilisez la disposition absolue pour la compléter.
PS: N'oubliez pas d'ajouter une valeur de rembourrage à gauche à la zone d'entrée (juste supérieure à votre largeur de code de vérification), sinon il bloquera le texte.
<style> #captCha {border-radius: 2px; curseur: pointeur; position: absolue; z-index: 3; gauche: 0; top: 0;} # validatecode {padding-left: 110px;} </ style> <div> <étiquette pour = "validatecode"> Code de vérification <male> Cliquez sur l'image pour rafraîchir la vérification la vérification de la vérification la vérification la vérification de la vérification la vérification de la vérification pour rafraîchir la vérification la vérification de la vérification de la vérification pour rafraîchir la vérification la vérification de la vérification pour rafraîchir la vérification la vérification la Verification Code </ small> </ label> <div> <img id = "captcha" src = 'data: image / png; base64, {{captcha :: doimg () [' imgcode ']}}'> <entrée = "text" id = "validatecode" name = "validatecode" lieuxholder = "quatre digitPermettez-moi de montrer au questionneur ma solution. Ceci est un site Web sur lequel j'écris. La taille de l'image est en ligne avec la hauteur de la boîte d'entrée. Il n'est pas nécessaire de modifier la largeur d'entrée. Laissez simplement l'image du code de vérification couvrir la zone d'entrée. Ajoutez ensuite une valeur de rembourrage à gauche à l'entrée. La taille est légèrement supérieure à la largeur de l'image du code de vérification. Il n'est pas pratique de répondre aux questions sur votre téléphone. Je l'expliquerai en détail quand je reviendrai.
Ce qui précède est la méthode d'implémentation de la zone de texte dans Bootstrap que je vous ai présenté en rétrécissant la largeur de la zone de texte et en ajoutant une image de code de vérification. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!