부트 스트랩 양식 입력 크기는 고려되지 않습니다.

예 : / user / login에서 사용자 이름 및 비밀번호 입력 필드에는 모두 HTML 속성 size = “60”이 포함됩니다.

Bartik에서는 필드의 너비가 고정되어 있습니다.

Bootstrap에서 , 필드가 전체 화면 너비에 맞게 늘어납니다.

요청 된 동작 : / user / login 및 웹 사이트의 다른 모든 페이지에서 Bootstrap이 size 속성을 따르도록합니다. 영향을받는 모든 페이지의 목록을 생성 할 수없고 시간이 지남에 따라 변경 될 것입니다.

Bootstrap SCSS의 무언가가 입력 필드의 너비를 엉망으로 만드는 것 같습니다. 해당 항목을 삭제하거나 재정의하고 싶습니다. 하지만 아직 어떻게해야하는지 알아 내지 못했습니다.

지금까지 찾은 내용 : Drupal.org에 이미 문제 가 있습니다. 여기서 모듈 관리자 markcarver는

전체 너비가 “늘어진”이유는 둘 다 폼 컨트롤 클래스를 가지고 있기 때문입니다. 이것은 부트 스트랩 디자인의 일부이며 기본적으로 싸우지 않을 것입니다. 하위 테마에서 적합하다고 생각되는대로이 양식을 변경하는 방법에는 여러 가지가 있습니다.

부분적으로 작동하지만 100 % 옳지 않은 것 : 텍스트 유형의 양식 제어 클래스를 사용하여 모든 입력에 새 너비를 설정하는 CSS를 작성할 수 있습니다. 그러나 너비를 15em과 같은 고정 값으로 설정합니다. 입력에 따라 달라지는 원래 너비를 되찾고 싶습니다.

댓글

  • 왜 안되는지 궁금합니다. '이 문제를 단순히 CSS로 수정하지 않습니까 ???
  • @leymannx 명확히했습니다. " 편집 2 . 예, CSS로 수정할 예정이지만 모든 필드를 포함하는 단일 변경 사항을 찾고 있습니다. 그렇게하는 방법을 알고 있다면 게시 / 댓글을 달아주세요.
  • 반대 투표 한 사람이 이유를 설명해 주시면 나중에 뭔가를 배우고 더 나은 질문을 할 수있을 것입니다.
  • Didn ' 반대표를 던지지는 않지만 실제로 지나치게 광범위한 질문을하고 자신이 한 일을 강조하지 않기 때문에 ' 발생한 것 같습니다. 지금까지이 문제를 직접 해결했습니다. 그 외에도 CSS로 문제를 해결하고 방법을 문의 할 수 있다면이 질문도 주제를 벗어납니다. ' 하위 테마를 만드는 방법을 가르치지 않고 ' 강력한 CSS를 작성하는 방법을 가르치지 않습니다. 이미 수백 개의 튜토리얼이 있습니다. 행운을 빕니다! 🙂
  • @leymannx 감사합니다. 사실 저는 매우 구체적인 질문을하고 있지만 잘못 설명한 것 같습니다. ' 한 번 더 수정하겠습니다. 하지만 혼란을 야기하는 질문을 삭제해야 할 수도 있습니다.

답변

해결하는 표준 방법 이것은 부트 스트랩 기반 하위 테마에서 CSS를 사용하는 것입니다. 사용자 이름 및 비밀번호 로그인 필드 :

#edit-name, #edit-pass { width: 15em; } 

NB 사용자 로그인뿐 아니라 특수한 경우로만 입력 할 수 없습니다.

재정의하려는 모든 텍스트 입력 필드에 대해이 방법 (css)을 사용할 수 있습니다. 부트 스트랩의 기본 동작입니다. 물론 재정의하려는 입력란에 올바른 CSS 선택기를 사용해야합니다.

댓글

  • 시간을내어 답변 해 주셔서 감사합니다. 내 " 편집 2 "를 참조하세요. 사례별로 영향을받을 수있는 모든 단일 필드를 식별하지 않아도되기를 바랍니다. 실용적이거나 유지 보수가 불가능하기 때문에
  • 텍스트 유형의 양식 제어 클래스에 의한 입력 및 대상?
  • @kevin, 미안하지만 질문을 이해하지 못합니다.
  • 사용 ID 대신 ' 텍스트 ' 유형 인 해당 클래스로 입력을 타겟팅 할 수 있습니다.
  • @Kevin 감사합니다. 네, 제가 바라던 것과 비슷합니다. 그러나 나는 여전히 15em과 같은 고정 너비로 붙어있을 것 같습니다. #size에 지정된 실제 너비를 유지하고 싶습니다. 부트 스트랩이 너비를 재정의하기 위해 수행 한 작업을 " 실행 취소 "하고 Bartik에서 발생하는 것과 똑같은 너비를 선택합니다.

답변

저는 전문가의 답변을 원했지만 여전히 환영 할 것입니다. set 내 대신 다른 답변을 수락합니다.

지금까지 최선의 시도입니다. 로그인 페이지와 검색 블록에서 작동하는 것 같습니다. 그러나 여전히 “내가하지 않는 시스템과 싸우고있는 것 같습니다.” 완전히 이해합니다.

.form-control, .input-group .form-control, .input-group-btn { width: auto; } 

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다