Source

引き伸ばされたリンク

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

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

カードはposition: relativeデフォルトで Bootstrap に含まれているため、この場合.stretched-link、他の HTML を変更することなく、クラスをカードのリンクに安全に追加できます。

ストレッチ リンクでは、複数のリンクとタップ ターゲットは推奨されません。ただし、これが必要な場合は、いくつかpositionのスタイルが役立ちます。z-index

Card image cap
リンクが張られたカード

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

どこかへ行きます
<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ため、リンクがメディア オブジェクトの外に広がるのを防ぐために、ここに を追加する必要があります。

Generic placeholder image
リンクが張られたメディア

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

Generic placeholder image
リンクが張られた列

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="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-changetransformperspective
  • filter以外の値noneまたは(Firefox でのみ機能)の値will-changefilter
Card image cap
リンクが張られたカード

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

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>