늘어난 링크

CSS를 통해 중첩 링크를 "확장"하여 HTML 요소 또는 부트스트랩 구성 요소를 클릭할 수 있도록 만듭니다.

포함하는 블록 을 의사 요소 를 통해 클릭 .stretched-link할 수 있도록 링크에 추가 합니다. 대부분의 경우 이는 클래스 와의 링크가 포함 된 요소를 클릭할 수 있음을 의미합니다. CSS 가 작동 하는 방식 을 고려할 때 대부분의 테이블 요소와 혼합될 수 없습니다.::afterposition: relative;.stretched-linkposition.stretched-link

카드는 position: relative기본적으로 부트스트랩에 있으므로 이 경우 .stretched-link다른 HTML 변경 없이 카드의 링크에 클래스를 안전하게 추가할 수 있습니다.

다중 링크 및 탭 대상은 확장된 링크에 권장되지 않습니다. 그러나 필요한 경우 일부 position및 z-index스타일이 도움이 될 수 있습니다.

링크가 확장된 카드

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

어딘가에 가다

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

position: relative대부분의 사용자 정의 구성 요소에는 기본적으로 포함되어 있지 않으므로 .position-relative링크가 상위 요소 외부로 늘어나는 것을 방지하기 위해 여기에 추가해야 합니다.

확장된 링크가 있는 사용자 구성 요소

이것은 사용자 정의 구성 요소에 대한 일부 자리 표시자 콘텐츠입니다. 실제 콘텐츠가 어떻게 생겼는지 모방하기 위한 것이며 여기에서 구성 요소에 약간의 본체와 크기를 부여하는 데 사용합니다.

어딘가에 가다

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

확장된 링크가 있는 열

이 다른 사용자 지정 구성 요소에 대한 자리 표시자 콘텐츠의 또 다른 인스턴스입니다. 실제 콘텐츠가 어떻게 생겼는지 모방하기 위한 것이며 여기에서 구성 요소에 약간의 본체와 크기를 부여하는 데 사용합니다.

어딘가에 가다

<div class="row g-0 bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

포함 블록 식별

확장된 링크가 작동하지 않는 것 같으면 포함하는 블록 이 원인일 수 있습니다. 다음 CSS 속성은 요소를 포함하는 블록을 만듭니다.

position이외 의 값static
A transform또는 perspective이외의 값none
will-change값 transform또는 _perspective
(Firefox에서만 작동) filter이외 의 값 none또는 will-change값filter

링크가 늘어난 카드

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

position: relative링크 에 추가 되었기 때문에 확장된 링크는 여기에서 작동하지 않습니다 .

이 확장된 링크p 는 변환이 적용되기 때문에 -tag 위에만 퍼 집니다.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>