늘어난 링크

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

포함하는 블록 을 의사 요소 를 통해 클릭 .stretched-link할 수 있도록 링크에 추가 합니다. 대부분의 경우 이는 클래스 와의 링크가 포함 된 요소를 클릭할 수 있음을 의미합니다.::afterposition: relative;.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링크가 미디어 개체 외부로 늘어나는 것을 방지하기 위해 여기에 추가해야 합니다.

링크가 확장된 미디어

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

어딘가에 가다

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

열은 position: relative기본적으로 있으므로 클릭 가능한 열에 .stretched-link는 링크의 클래스만 필요합니다. 그러나 전체에 걸쳐 링크를 늘리 려면 열과 행 .row이 필요합니다 ..position-static.position-relative

확장된 링크가 있는 열

어딘가에 가다

<div class="row no-gutters 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 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</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>