Izstiepta saite

Padariet jebkuru HTML elementu vai Bootstrap komponentu klikšķināmu, “izstiepjot” ligzdotu saiti, izmantojot CSS.

Pievienojiet .stretched-linksaitei, lai padarītu to saturošo bloku klikšķināmu, izmantojot ::afterpseidoelementu. Vairumā gadījumu tas nozīmē, ka elements ar position: relative;saiti uz .stretched-linkklasi ir noklikšķināms. Lūdzu, ņemiet vērā, kā darbojas CSSposition , .stretched-linkto nevar sajaukt ar lielāko daļu tabulas elementu.

Kartēm position: relativepēc noklusējuma ir Bootstrap, tāpēc šajā gadījumā varat droši pievienot .stretched-linkklasi saitei kartē bez citām HTML izmaiņām.

Ar izstieptām saitēm nav ieteicamas vairākas saites un pieskaršanās mērķi. Tomēr daži positionun z-indexstili var palīdzēt, ja tas ir nepieciešams.

Karte ar izstieptu saiti

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Aizej kaut kur

html

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

Lielākajai daļai pielāgoto komponentu position: relativepēc noklusējuma nav, tāpēc mums ir jāpievieno .position-relativešeit, lai novērstu saites izstiepšanos ārpus vecākelementa.

Pielāgots komponents ar izstieptu saiti

Šis ir viettura saturs pielāgotajam komponentam. Tas ir paredzēts, lai atdarinātu to, kā izskatītos kāds reālās pasaules saturs, un mēs to izmantojam šeit, lai piešķirtu komponentam nedaudz ķermeņa un izmēra.

Aizej kaut kur

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <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.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Kolonnas ar izstieptu saiti

Vēl viens viettura satura gadījums šim citam pielāgotajam komponentam. Tas ir paredzēts, lai atdarinātu to, kā izskatītos kāds reālās pasaules saturs, un mēs to izmantojam šeit, lai piešķirtu komponentam nedaudz ķermeņa un izmēra.

Aizej kaut kur

html

<div class="row g-0 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 p-4 ps-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>

Saturošā bloka identificēšana

Ja šķiet, ka izstieptā saite nedarbojas, iespējams, iemesls būs saturošais bloks . Tālāk norādītie CSS rekvizīti padarīs elementu par saturošu bloku:

positionVērtība, kas navstatic
A transformvai perspectivevērtība, kas navnone
will-changeVērtība transformvai _perspective
Vērtība , filterkas nav nonevai will-changevērtība filter(darbojas tikai pārlūkprogrammā Firefox)

Karte ar izstieptām saitēm

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Izstiepta saite šeit nedarbosies, jo position: relativeir pievienota saitei

Šī izstieptā saite tiks izplatīta tikai pa ptagu -, jo tai tiek piemērota transformācija.

html

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