늘어난 링크
CSS를 통해 중첩 링크를 "확장"하여 HTML 요소 또는 부트스트랩 구성 요소를 클릭할 수 있도록 만듭니다.
포함하는 블록 을 의사 요소 를 통해 클릭 .stretched-link
할 수 있도록 링크에 추가 합니다. 대부분의 경우 이는 클래스 와의 링크가 포함 된 요소를 클릭할 수 있음을 의미합니다. CSS 가 작동 하는 방식 을 고려할 때 대부분의 테이블 요소와 혼합될 수 없습니다.::after
position: relative;
.stretched-link
position
.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="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media with stretched link</h5>
<p>This is some placeholder content for the media object. 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>
열은 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>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>