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. Sylwch o ystyried sut mae CSS positionyn gweithio , .stretched-linkni ellir ei gymysgu â'r rhan fwyaf o elfennau tabl.

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

Dyma rywfaint o gynnwys dalfan ar gyfer gwrthrych y cyfryngau. Ei fwriad yw dynwared sut olwg fyddai ar gynnwys byd go iawn, ac rydym yn ei ddefnyddio yma i roi ychydig o gorff a maint i'r gydran.

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>This is some placeholder content for the media object. 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.</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

Enghraifft arall o gynnwys dalfan ar gyfer y gydran arferiad arall hon. Ei fwriad yw dynwared sut olwg fyddai ar gynnwys byd go iawn, ac rydym yn ei ddefnyddio yma i roi ychydig o gorff a maint i'r gydran.

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>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.</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 trawsffurfiad 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>