วันนี้ผู้จัดการโครงการเพิ่งให้งานฉันและขอให้ฉันใช้ฟังก์ชั่นดังกล่าว: สิ่งที่ฉันต้องการให้บรรลุคือการ จำกัด กล่องข้อความรหัสการตรวจสอบแล้วเพิ่มภาพรหัสการตรวจสอบทางด้านขวาและในกรณีของเค้าโครงที่ตอบสนอง จะทำอย่างไร? เป็นเรื่องยากเป็นเวลานานและหลังจากนั้นฉันก็พบความคิดของการรับรู้ บรรณาธิการจะแบ่งปันความคิดและกระบวนการดำเนินการของฉันกับคุณ หากคุณมีคำถามใด ๆ โปรดถามพวกเขาและเรียนรู้และดำเนินการด้วยกัน!
แนวคิดการใช้งาน:
การเรนเดอร์การดำเนินการ
เพิ่มรหัสเค้าโครงกริดของ Bootstrap ลงในตัวเองเพื่อควบคุมเค้าโครงภายใต้ความละเอียดที่แตกต่างกัน
สิ่งที่จำเป็นต้องมีเพียงอย่างเดียวสำหรับการใช้งานนี้คือความสูงของภาพรหัสการตรวจสอบของคุณจะต้องเหมือนกับความสูงของกล่องอินพุต (ความสูงของกล่องอินพุตประมาณ 34px)
หลังจากนั้นมันจะง่าย ให้ภาพรหัสการตรวจสอบทับซ้อนกันบนกล่องอินพุตและใช้เลย์เอาต์สัมบูรณ์เพื่อให้เสร็จสมบูรณ์
PS: อย่าลืมเพิ่มค่า padding-left ไปยังกล่องอินพุต (มากกว่าความกว้างของรหัสการตรวจสอบของคุณ) มิฉะนั้นจะบล็อกข้อความ
<style> #captcha {Border-Radius: 2px; Cursor: Pointer; ตำแหน่ง: Absolute; Z-Index: 3; ซ้าย: 0; Top: 0;}#ValidateCode {Padding-Left: 110px;} </style> รหัส </small> </label> <div> <img id = "captcha" src = 'data: image/png; base64, {{captcha :: doimg () [' imgcode ']}}'> <อินพุตประเภท = "ข้อความ"ให้ฉันแสดงผู้ถามทางออกของฉัน นี่คือเว็บไซต์ที่ฉันเขียน ขนาดของภาพสอดคล้องกับความสูงของกล่องอินพุต ไม่จำเป็นต้องเปลี่ยนความกว้างของอินพุต เพียงแค่ให้ภาพรหัสยืนยันครอบคลุมกล่องอินพุต จากนั้นเพิ่มค่า padding-left ไปยังอินพุต ขนาดใหญ่กว่าความกว้างของภาพรหัสการตรวจสอบเล็กน้อย ไม่สะดวกที่จะตอบคำถามทางโทรศัพท์ของคุณ ฉันจะอธิบายโดยละเอียดเมื่อกลับไป
ด้านบนเป็นวิธีการใช้งานของกล่องข้อความใน bootstrap ที่ฉันแนะนำให้คุณรู้จักโดยการ จำกัด ความกว้างของกล่องข้อความและเพิ่มรูปภาพการตรวจสอบรหัส ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!