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.

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>

Medijski objekti nimajo position: relativeprivzetih vrednosti, zato moramo .position-relativetukaj dodati, da preprečimo, da bi se povezava raztezala izven medijskega objekta.

Mediji z raztegnjeno povezavo

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.

Pojdi nekam

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

Stolpci so position: relativeprivzeti, zato stolpci, ki jih je mogoče klikniti, zahtevajo samo .stretched-linkrazred na povezavi. Vendar pa raztezanje povezave čez celoto .rowzahteva .position-staticstolpec in .position-relativevrstico.

Stolpci z raztegnjeno povezavo

Pojdi nekam

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

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>