伸長リンク（Stretched link） v4.3.0新設

リンクに .stretched-link を追加して、 ::after 擬似要素を介して包含ブロックをクリック可能にする。ほとんどの場合、これは position: relative;（相対位置）を持つ要素が .stretched-link クラスとのリンクを含めることで実現可能。CSSの位置がどのように機能するかを考えると、.stretched-link はほとんどのテーブル要素と混在させることはできないので注意（※裏技として掲載していたテーブルの場合の解説はv4.6.0で削除）。

同一要素内の複数のリンクとタップのターゲットは、伸長リンクでは推奨しない。もし、これが必要な場合は、数個の position と z-index のスタイルを付ける必要がある。

実例（Examples）

カードの場合

Bootstrapのカードはデフォルトで position: relative; なので、.stretched-link クラスは他のHTMLを変更せずに安全にカードのリンクに追加可能。

見本

設定例

コピー<div class="card" style="width: 18rem;">
	<img src="..." alt="カード画像の説明" class="card-img-top">
	<div class="card-body">
		<h5 class="card-title">伸長リンク付きカード</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
		<a href="#" class="btn btn-primary stretched-link">リンクボタン</a>
	</div>
</div>

メディアオブジェクトの場合

メディアオブジェクトはデフォルトで position: relative; ではないので、リンクがメディアオブジェクトの外側に伸びないように .position-relative を追加する必要がある。

見本

設定例

コピー<div class="media position-relative">
	<img src="..." alt="..." class="mr-3">
	<div class="media-body">
		<h5 class="mt-0">伸長リンク付きメディア</h5>
		<p>これは、メディアオブジェクトのプレースホルダーコンテンツ。...</p>
		<a href="#" class="stretched-link">リンク</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="..." alt="..." class="w-100">
	</div>
	<div class="col-md-6 position-static p-4 pl-md-0">
		<h5 class="mt-0">伸長リンク付きのグリッド列</h5>
		<p>もう一つのカスタムコンポーネントのプレースホルダーコンテンツの別の実例。...</p>
		<a href="#" class="stretched-link">リンク</a>
	</div>
</div>

 

包含ブロックの識別（Identifying the containing block）

伸長リンクが機能していないように見える場合、包含ブロックが原因である可能性がある。以下のcssプロパティは要素を包含ブロックにする：

• position の値が static 以外（relative, absolute, fixed, sticky）の場合
• transform または perspective の値が none 以外の場合
• will-change の値が transform または perspective の場合
• filter の値が none 以外、または will-change の値が filter の場合（Firefoxのみで動作）

見本

設定例

コピー<div class="card" style="width: 18rem;">
	<img src="..." alt="カード画像の説明" class="card-img-top">
	<div class="card-body">
		<h5 class="card-title">伸長リンク付きカード</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
		<p class="card-text">
			<a href="#card-link-1" class="stretched-link text-danger" style="position: relative;">リンクに <code>position: relative</code> が追加されているため、ここでは伸長リンクは機能しない</a>
		</p>
		<p class="card-text bg-light" style="transform: rotate(0);">
			この<a href="#card-unclickable-link" class="text-warning stretched-link">伸長リンク</a>は、<code>transform</code> が適用されているため、<code>p</code> タグ内でのみ機能する。</p>
	</div>
</div>