부트스트랩 양식에서 ``내부에 ``를 중첩할 수 있나요?-CSS 튜토리얼-php.cn

Can I Nest a `` Inside a `` in a Bootstrap Form?

Bootstrap 양식의 Nest Div Inside Label

Bootstrap을 사용하여 가로 양식을 생성할 때 기본 템플릿은 각 입력 필드에 ID를 할당하는 경우가 많습니다. 이를 방지하기 위해 일부 개발자는 입력 필드와 해당 레이블을 블록 수준

내부 요소

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

로그인 후 복사

이 접근 방식은 문제를 해결하는 것처럼 보이지만 HTML 표준과 충돌합니다.

비호환성 해결

HTML 사양에 따르면 요소에는

요소. 사양에는 요소의 콘텐츠 모델은 과 같은 인라인 요소를 포함하는 구문 콘텐츠만 허용합니다. 및 이 있지만

와 같은 블록 수준 요소는 제외됩니다.

따라서 블록 수준

인라인 요소의 동작이 올바르지 않습니다.

가능한 해결 방법

적절한 HTML 구조를 유지하면서 입력 필드에 ID를 사용하지 않으려면 요소의 "for" 속성을 사용하는 것이 좋습니다. <라벨> 특정 입력 필드와 연결하는 요소:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control">

로그인 후 복사

위 내용은 부트스트랩 양식에서 ``내부에 ``를 중첩할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS 의사 요소에 호버 효과를 어떻게 만들 수 있나요? 다음 기사：CSS 데이터 속성이 의사 요소를 사용하여 개행 문자를 렌더링할 수 있습니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2262

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2398