引き伸ばされたリンク

CSS を介してネストされたリンクを「引き伸ばす」ことにより、HTML 要素または Bootstrap コンポーネントをクリック可能にします。

.stretched-linkリンクに追加して、疑似要素を介して含まれるブロックをクリック可能にします。::afterほとんどの場合、これは、クラスposition: relative;へのリンクを含む要素がクリック可能であることを意味します。.stretched-link

カードはposition: relativeデフォルトで Bootstrap に含まれているため、この場合.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 sollicitudin. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

どこかへ行きます

<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
Atransformまたはperspectiveそれ以外の値none
またはのwill-change値transformperspective
filter以外の値noneまたは(Firefox でのみ機能)の値will-changefilter

リンクが張られたカード

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。

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>