Stretched link

CSSによってネストされたリンクをストレッチによって, HTML要素やBootstrapコンポーネントをクリック可能にすることができます。ステレッチリンクの使い方の例を示します。

.stretched-link を追加すると position: relative; な親要素に対してクリックが可能になります。これは ::after 疑似要素で実現されています。

Bootstrapのデフォルトでは card は 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.

<div class="card" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card image cap</title><rect width="100%" height="100%" fill="#868e96"/></svg>
  <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 を追加する必要があります。

Media with stretched link

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.

Go somewhere

<div class="media position-relative">
  <svg class="bd-placeholder-img mr-3" width="144" height="144" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Generic placeholder image"><title>Generic placeholder image</title><rect width="100%" height="100%" fill="#868e96"/></svg>
  <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 が必要です。

Columns with stretched link

Go somewhere

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <svg class="bd-placeholder-img w-100" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Generic placeholder image"><title>Generic placeholder image</title><rect width="100%" height="100%" fill="#868e96"/></svg>
  </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>

Identifying the containing block

もしステレッチリンクが機能しない場合は, containing block が原因の可能性があります。
次のCSSプロパティは、要素を包含ブロックにします。

A position value other than static
A transform or perspective value other than none
A will-change value of transform or perspective
A filter value other than none or a will-change value of filter (only works on 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;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card image cap</title><rect width="100%" height="100%" fill="#868e96"/></svg>
  <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>

v4.4