Hoje, o gerente do projeto acabou de me dar um emprego e me pediu para implementar essa função: o que eu quero alcançar é restringir a caixa de texto do código de verificação e, em seguida, adicionar uma imagem do código de verificação à direita e, no caso de layout responsivo, a imagem do código de verificação pode ser mantida na mesma linha que o código de verificação da caixa de texto ao acessar o terminal móvel. Como fazer isso? Tem sido difícil há muito tempo e, mais tarde, achei a idéia de realização. O editor compartilhará minhas idéias e processo de implementação com você. Se você tiver alguma dúvida, pergunte -lhes e aprenda e faça progresso juntos!
Ideias de implementação:
Renderizações de implementação
Adicione o código de layout da grade da Bootstrap a ele para controlar o layout sob diferentes resoluções.
O único pré -requisito para esta implementação é que a altura da imagem do seu código de verificação precisa ser a mesma que a altura da caixa de entrada (a altura da caixa de entrada é de cerca de 34px).
Depois disso, será simples. Deixe a imagem do código de verificação se sobrepor na caixa de entrada e use o layout absoluto para concluí -lo.
PS: Lembre-se de adicionar um valor de preenchimento à esquerda à caixa de entrada (apenas maior que a largura do código de verificação), caso contrário, ele bloqueará o texto.
<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">Verification Code<small>Click on the image to refresh the verification code</small></label><div><img id = "captcha" src = 'dados: imagem/png; base64, {{captcha :: doimg () [' imgcode ']}}'> <input type = "text" id = "validatecode" name = "validatecode" stakeholder = "quatro digit" Código de verificação do caractere ">Deixe -me mostrar ao questionador minha solução. Este é um site sobre o qual estou escrevendo. O tamanho da imagem está alinhado com a altura da caixa de entrada. Não há necessidade de alterar a largura da entrada. Basta deixar a imagem do código de verificação cobrir a caixa de entrada. Em seguida, adicione um valor de preenchimento à esquerda à entrada. O tamanho é um pouco maior que a largura da imagem do código de verificação. É inconveniente responder a perguntas no seu telefone. Vou explicar em detalhes quando voltar.
O acima é o método de implementação da caixa de texto no bootstrap que eu apresentei a você, estreitando a largura da caixa de texto e adicionando uma imagem do código de verificação. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!