ストレッチリンク

CSSでネストされたリンクを「Stretched link (ストレッチリンク) にすることで、任意のHTML要素やBootstrapコンポーネントをクリックできるようにします。

リンクに stretched 属性を追加して、::after 擬似要素を使ってそのリンクの containing block がクリックが可能になるようにします。

ほとんどの場合、これは、 stretched 属性のリンクを含む position：relative; の要素がクリック可能であることを意味します。

Bootstrapではデフォルトでカードに position：relative; があるため、この場合、他のHTMLを変更せずに、カード内のリンクに stretched 属性を安全に追加できます。

複数のリンクやタップターゲットは、ストレッチリンクでは推奨されません。しかし、必要に応じて position や z-index スタイルを利用することができます。

ほとんどのカスタムコンポーネントはデフォルトで position: relative を持っていないので、リンクが親要素の外に伸びないようにするためにここに .position-relative を追加する必要があります。

Generic placeholder image
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
vue
<template>
 <b-div flex>
  <b-img
   src="https://dummyimage.com/144x144/868e96/868e96"
   flex-shrink="0"
   margin="e-3"
   alt="Generic placeholder image"
  />
  <b-div position="relative">
   <CardTitle>
    <b-h
     level="5"
     margin="t-0"
    >
     Custom component with stretched link
    </b-h>
   </CardTitle>
   <b-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.
   </b-p>
   <Anchor
    stretched
    to="/"
   >
    Go somewhere
   </Anchor>
  </b-div>
 </b-div>
</template>
...
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
vue
<template>
 <Row
  position="relative"
  background-color="light"
  gutter="0"
 >
  <Col
   col="md-6"
   margin="b-md-6"
   padding="md-3"
  >
   <b-img
    src="https://dummyimage.com/300x200/868e96/868e96"
    alt="..."
    fluid
   />
  </Col>
  <Col
   col="md-6"
   padding="3 s-md-0"
  >
   <b-h
    level="5"
    margin="t-0"
   >
    Columns with stretched link
   </b-h>
   <b-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.
   </b-p>
   <Anchor
    stretched
    to="/"
   >
    Go somewhere
   </Anchor>
  </Col>
 </Row>
</template>

Identifying the containing block

伸びたリンクがうまくいかないようであれば、containing block が原因ではないかと思います。以下のCSSプロパティで要素を content blockにします。

  • static以外のposition値
  • none以外のtransformまたはperspective値
  • transformまたはperspectiveのwill-change値
  • filterのnoneまたはfilterのwill-change以外の値 (Firefoxでのみ動作します。)
Card image cap
Card with stretched link

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.

vue
<template>
 <b-div style="width: 18rem">
  <Card>
   <b-img
    src="https://dummyimage.com/286x180/868e96/868e96"
    fluid
    alt="Card image cap"
   />
   <CardBody>
    <CardHeader>
     <b-h level="5">
      Card with stretched link
     </b-h>
    </CardHeader>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
    <CardText>
     <Anchor
      stretched
      to="/"
      text="danger"
      position="relative"
     >
      Stretched link will not work here, because
      <code>position: relative</code>
      is added to the link
     </Anchor>
    </CardText>
    <CardText class="bg-light">
     This
     <Anchor stretched>
      stretched link
     </Anchor>
     will only be spread over the
     <code>p</code>
     -tag, because a transform is applied to it.
    </CardText>
   </CardBody>
  </Card>
 </b-div>
</template>

See Also