Dolen estynedig

Gwnewch unrhyw elfen HTML neu gydran Bootstrap yn glic trwy “ymestyn” dolen nythu trwy CSS.

Ychwanegu .stretched-linkat ddolen i wneud ei bloc sy'n cynnwys yn gallu clicio trwy ::afterelfen ffug. Yn y rhan fwyaf o achosion, mae hyn yn golygu bod modd clicio ar elfen gyda position: relative;hynny sy'n cynnwys dolen â'r .stretched-linkdosbarth.

Mae gan gardiau position: relativeyn Bootstrap yn ddiofyn, felly yn yr achos hwn gallwch chi ychwanegu'r .stretched-linkdosbarth yn ddiogel at ddolen yn y cerdyn heb unrhyw newidiadau HTML eraill.

Ni argymhellir dolenni lluosog a thargedau tap gyda chysylltiadau estynedig. Fodd bynnag, gall rhai positionac z-indexarddulliau helpu pe bai angen hyn.

Cerdyn gyda dolen estynedig

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Ewch i rywle

<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>

Nid oes position: relativegan wrthrychau cyfryngau yn ddiofyn, felly mae angen i ni ychwanegu'r .position-relativeyma i atal y cyswllt rhag ymestyn y tu allan i'r gwrthrych cyfryngau.

Cyfryngau gyda dolen estynedig

Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.

Ewch i rywle

<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>

Mae colofnau yn position: relativeddiofyn, felly dim ond y .stretched-linkdosbarth ar ddolen sydd ei angen ar golofnau y gellir eu clicio. .rowFodd bynnag, mae angen ymestyn dolen dros un cyfan .position-staticar y golofn ac .position-relativear y rhes.

Colofnau gyda dolen estynedig

Ewch i rywle

<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>

Adnabod y bloc sy'n cynnwys

Os yw'n ymddangos nad yw'r cyswllt estynedig yn gweithio, mae'n debyg mai'r bloc sy'n cynnwys yw'r achos. Bydd y priodweddau CSS canlynol yn gwneud elfen y bloc cynnwys:

Gwerth positionheblawstatic
A transformneu perspectivewerth heblawnone
Gwerth will-changeo transformneuperspective
Gwerth filterheblaw noneneu will-changewerth o filter(yn gweithio ar Firefox yn unig)

Cerdyn gyda chysylltiadau estynedig

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Ni fydd dolen estynedig yn gweithio yma, oherwydd ei fod position: relativeyn cael ei ychwanegu at y ddolen

Bydd y cyswllt estynedig hwn yn cael ei wasgaru dros y p-tag yn unig, oherwydd bod trawsnewidiad yn cael ei gymhwyso iddo.

<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>