Hari ini, manajer proyek baru saja memberi saya pekerjaan dan meminta saya untuk mengimplementasikan fungsi seperti itu: Apa yang ingin saya capai adalah mempersempit kotak teks kode verifikasi, dan kemudian menambahkan gambar kode verifikasi ke kanan, dan dalam hal tata letak responsif, gambar kode verifikasi dapat disimpan di baris yang sama dengan kotak teks kode verifikasi saat mengakses terminal seluler. Bagaimana cara melakukan ini? Sudah sulit untuk waktu yang lama, dan kemudian saya menemukan gagasan realisasi. Editor akan berbagi ide dan proses implementasi saya dengan Anda. Jika Anda memiliki pertanyaan, silakan tanyakan dan pelajari dan buat kemajuan bersama!
Ide Implementasi:
Rendering implementasi
Tambahkan kode tata letak grid Bootstrap sendiri untuk mengontrol tata letak di bawah resolusi yang berbeda.
Satu -satunya prasyarat untuk implementasi ini adalah bahwa ketinggian gambar kode verifikasi Anda harus sama dengan ketinggian kotak input (ketinggian kotak input sekitar 34px).
Setelah itu, itu akan sederhana. Biarkan gambar kode verifikasi tumpang tindih pada kotak input dan gunakan tata letak absolut untuk menyelesaikannya.
PS: Ingatlah untuk menambahkan nilai padding-kiri ke kotak input (hanya lebih besar dari lebar kode verifikasi Anda), jika tidak, itu akan memblokir teks.
<tyle> #captcha {border-radius: 2px; kursor: pointer; posisi: absolute; z-index: 3; kiri: 0; atas: 0;}#validateCode {padding-left: 110px;} </style> <ver> <label for = "validateCode"> Kode verifikasi </styes </style> <Div> <label for = "validateCode"> Kode verifikasi </iM Small> </style> <Div> <label untuk = "validateCode"> Kode verifikasi </iM Small> The CLICT ON THE THE THE THE THE COMINGT <DIV> id="captcha"src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'><input type="text"id="validateCode" name="validateCode"placeholder="Four-digit character verification code"></div></div>Izinkan saya menunjukkan solusi saya penanya. Ini adalah situs web yang saya tulis. Ukuran gambar sejalan dengan ketinggian kotak input. Tidak perlu mengubah lebar input. Biarkan gambar kode verifikasi menutupi kotak input. Kemudian tambahkan nilai padding-kiri ke input. Ukurannya sedikit lebih besar dari lebar gambar kode verifikasi. Tidak nyaman untuk menjawab pertanyaan di ponsel Anda. Saya akan menjelaskannya secara detail ketika saya kembali.
Di atas adalah metode implementasi kotak teks di bootstrap yang saya perkenalkan kepada Anda dengan mempersempit lebar kotak teks dan menambahkan gambar kode verifikasi. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!