오늘, 프로젝트 관리자는 방금 작업을 제공하고 그러한 기능을 구현하도록 요청했습니다. 달성하려는 것은 확인 코드 텍스트 상자를 좁히고 오른쪽에 검증 코드 사진을 추가하는 것입니다. 반응 형 레이아웃의 경우 검증 코드 사진을 모바일 터미널에 액세스 할 때 동일한 라인에 유지할 수 있습니다. 이 작업을 수행하는 방법? 오랫동안 어려웠고 나중에 실현에 대한 아이디어를 발견했습니다. 편집자는 내 아이디어와 구현 프로세스를 귀하와 공유합니다. 궁금한 점이 있으면 그들에게 물어보고 함께 배우고 함께 진행하십시오!
구현 아이디어 :
구현 렌더링
다른 해상도 하에서 레이아웃을 제어하기 위해 부트 스트랩의 그리드 레이아웃 코드를 직접 추가하십시오.
이 구현의 유일한 전제 조건은 검증 코드 이미지의 높이가 입력 상자의 높이와 동일해야한다는 것입니다 (입력 상자의 높이는 약 34px).
그 후에는 간단합니다. 입력 상자에 확인 코드 이미지가 겹치게하고 절대 레이아웃을 사용하여 완료하십시오.
추신 : 입력 상자에 패딩 좌파 값을 추가해야합니다 (검증 코드 너비보다 큽니다). 그렇지 않으면 텍스트가 차단됩니다.
<captcha {Border-Radius : 2PX; 커서 : 포인터; 위치 : 위치 : 절대; Z-index : 3; 왼쪽 : 0; 상단 : 0;}#validaTecode {padding-left : 110px;} </style> <div> <label for = "validatecode"> verification code <</lade> <div> </small> </small> </small> </small> </small> </stall> 클릭하십시오. id = "captcha"src = 'data : image/png; base64, {{captcha :: doimg () ['imgcode ']}'} '}'> <input type = "text"id = "validatecode"name = "validatecode"placeholder = "4 자리 문자 확인 코드"> </div> </div> </div>질문자에게 내 해결책을 보여 드리겠습니다. 이것은 내가 쓰고있는 웹 사이트입니다. 이미지의 크기는 입력 상자의 높이와 일치합니다. 입력 너비를 변경할 필요가 없습니다. 확인 코드 사진이 입력 상자를 덮으십시오. 그런 다음 입력에 패딩 왼쪽 값을 추가하십시오. 크기는 검증 코드 사진의 너비보다 약간 큽니다. 휴대 전화에서 질문에 답하는 것은 불편합니다. 내가 돌아갈 때 자세히 설명하겠습니다.
위는 텍스트 상자의 너비를 좁히고 확인 코드 사진을 추가하여 부트 스트랩에서 텍스트 상자의 구현 방법입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!