ストレッチリンク
CSSでネストされたリンクを「ストレッチ」することで、HTML要素やBootstrapコンポーネントをクリック可能にします。
リンクに.stretched-linkを追加すると、その包含ブロックを::after疑似要素を介してクリック可能にします。ほとんどの場合、これは.stretched-linkクラスを持つリンクを含むposition: relative;を持つ要素がクリック可能になることを意味します。CSSのpositionがどのように動作するか を考えると、.stretched-linkはほとんどのテーブル要素と混在できないことに注意してください。
Bootstrapでは、カードはデフォルトでposition: relativeを持っているので、他のHTMLを変更することなく安全にカード内のリンクに.stretched-linkクラスを追加することができます。
ストレッチリンクでは複数のリンクやタップターゲットは推奨されません。しかし、いくつかのpositionとz-indexスタイルは、これが必要な場合に役立ちます。
Card with stretched link
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<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を追加してリンクが親要素の外側に伸びるのを防ぐ必要があります。
Custom component with stretched link
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.
Go somewhere<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>Columns with stretched link
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.
Go somewhere<div class="row g-0 bg-body-secondary 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プロパティは、要素を包含ブロックにします：
static以外のpositionの値none以外のtransformまたはperspectiveの値transformまたはperspectiveのwill-changeの値none以外のfilterの値、またはfilterのwill-changeの値（これはFirefoxでのみ動作します）
Card with stretched links
Some quick example text to build on the card title and make up the bulk of the card's content.
Stretched link will not work here, because position: relative is added to the link
This stretched link will only be spread over the p-tag, because a transform is applied to it.
<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-body-tertiary" 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>