Raztegnjena povezava

Naredite kateri koli element HTML ali komponento Bootstrap, ki jo je mogoče klikniti, tako da "raztegnete" ugnezdeno povezavo prek CSS.

Dodajte .stretched-linkna povezavo, da bo blok, ki ga vsebuje, mogoče klikniti prek ::afterpsevdo elementa. V večini primerov to pomeni, da je mogoče klikniti element position: relative;, ki vsebuje povezavo z .stretched-linkrazredom. Upoštevajte, kako CSS positiondeluje , .stretched-linkga ni mogoče mešati z večino elementov tabele.

Kartice imajo position: relativeprivzeto v Bootstrapu, tako da lahko v tem primeru varno dodate .stretched-linkrazred na povezavo na kartici brez drugih sprememb HTML.

Pri raztegnjenih povezavah ni priporočljivo uporabljati več povezav in ciljev dotika. Vendar pa lahko nekateri positionslogi z-indexpomagajo, če je to potrebno.

Kartica z raztegnjeno povezavo

Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Pojdi nekam

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

Večina komponent po meri nima position: relativeprivzetih vrednosti, zato moramo .position-relativetukaj dodati, da preprečimo, da bi se povezava raztegnila izven nadrejenega elementa.

Komponenta po meri z raztegnjeno povezavo

To je nekaj nadomestne vsebine za komponento po meri. Namenjen je posnemanju, kako bi izgledala nekatera vsebina iz resničnega sveta, in tukaj jo uporabljamo, da komponenti damo malo telesa in velikosti.

Pojdi nekam

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

Stolpci z raztegnjeno povezavo

Še en primerek vsebine nadomestnega znaka za to drugo komponento po meri. Namenjen je posnemanju, kako bi izgledala nekatera vsebina iz resničnega sveta, in tukaj jo uporabljamo, da komponenti damo malo telesa in velikosti.

Pojdi nekam

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

Prepoznavanje vsebovalnega bloka

Če se zdi, da raztegnjena povezava ne deluje, bo verjetno vzrok vsebovalni blok . Naslednje lastnosti CSS bodo element vseboval blok:

positionVrednost, ki nistatic
A transformali perspectivevrednost, ki ninone
will-changeVrednost transformoz _perspective
filterVrednost, ki ni ali nonevrednost will-change( filterdeluje samo v Firefoxu)

Kartica z raztegnjenimi povezavami

Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Raztegnjena povezava tukaj ne bo delovala, ker position: relativeje dodana povezavi

Ta raztegnjena povezava bo razpršena le čez oznako p-tag, ker je zanjo uporabljena transformacija.

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