今日、プロジェクトマネージャーは私に仕事を与えてくれて、そのような機能を実装するように頼みました。達成したいのは、検証コードテキストボックスを絞り込み、右に検証コードの画像を追加することです。応答性レイアウトの場合、モバイル端末にアクセスするときに検証コードの画像を検証コードテキストボックスと同じ行に保持できます。これを行う方法は？長い間困難でしたが、後に実現のアイデアを見つけました。編集者は、私のアイデアと実装プロセスをあなたと共有します。ご質問がある場合は、それらを尋ねて一緒に学び、進歩を遂げてください！
実装のアイデア：
実装レンダリング
Bootstrapのグリッドレイアウトコードを自分で追加して、さまざまな解像度の下でレイアウトを制御します。
この実装の唯一の前提条件は、検証コード画像の高さが入力ボックスの高さと同じである必要があることです（入力ボックスの高さは約34px）。
その後、簡単になります。検証コードイメージを入力ボックスに重複させ、絶対レイアウトを使用して完成させます。
PS：入力ボックスにパディング左値を追加することを忘れないでください（検証コード幅よりも大きい）。それ以外の場合は、テキストをブロックします。
<style> #captcha {border-radius：2px; cursor：pointer; position：absolute; z-index：3; left：0; top：0;}＃validatecode {padding-left：110px;} </style> <div> <label for = "validatecode" id = "captcha" src = 'data：image/png; base64、{{captcha :: doimg（）[' imgcode ']}}'> <入力タイプ= "テキスト" id = "validatecode" name = "validatecode" placeholder = "質問者に私の解決策を見せてみましょう。これは私が書いているウェブサイトです。画像のサイズは、入力ボックスの高さに沿っています。入力幅を変更する必要はありません。検証コード画像に入力ボックスをカバーします。次に、入力にパディング左値を追加します。サイズは、検証コード画像の幅よりわずかに大きいです。携帯電話で質問に答えるのは不便です。戻ってきたら詳細に説明します。
上記は、テキストボックスの幅を絞り込み、検証コード画像を追加することで紹介したブートストラップのテキストボックスの実装方法です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！