Gestreckt Link

Maacht all HTML Element oder Bootstrap Komponent klickbar andeems Dir en nestéierte Link iwwer CSS "strecken".

Füügt .stretched-linke Link un fir säi Inhaltsblock klickbar ze maachen iwwer e ::afterPseudo-Element. Am meeschte Fäll heescht dat, datt en Element mat position: relative;deem e Link mat der .stretched-linkKlass enthält ass klicktbar.

Kaarten hunn position: relativePar défaut am Bootstrap, also an dësem Fall kënnt Dir sécher d' .stretched-linkKlass op e Link op der Kaart ouni aner HTML Ännerungen derbäi.

Multiple Linken an Tapziler sinn net recommandéiert mat gestreckte Linken. Wéi och ëmmer, e puer positiona z-indexStiler kënnen hëllefen wann dëst erfuerderlech ass.

Kaart mat gestrecktem Link

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Gitt iergendwou

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

Mediaobjekter hunn net als position: relativeStandard, also musse mir den .position-relativehei addéieren fir ze verhënneren datt de Link ausserhalb vum Medienobjekt streckt.

Medien mat gestrecktem Link

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.

Gitt iergendwou

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

Kolonnen sinn position: relativestandardiséiert, sou datt klickbar Kolonnen nëmmen d' .stretched-linkKlass op engem Link erfuerderen. Wéi och ëmmer, e Link iwwer e Ganzt ze strecken .rowerfuerdert .position-staticop der Kolonn an .position-relativeop der Zeil.

Saile mat gestrecktem Link

Gitt iergendwou

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

Identifikatioun vun der enthalende Block

Wann de gestreckte Link net schéngt ze funktionnéieren, ass de enthale Block wahrscheinlech d'Ursaach. Déi folgend CSS Properties maachen en Element dat enthalent Block:

E positionWäert anescht wéistatic
A transformoder perspectiveWäert anescht wéinone
E will-changeWäert vun transformoderperspective
E filterWäert anescht wéi noneoder e will-changeWäert vun filter(schafft nëmmen op Firefox)

Kaart mat gestreckte Linken

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Stretched Link wäert net hei schaffen, well position: relativeass op de Link dobäigesat

Dëse gestreckte Link gëtt nëmmen iwwer den p-Tag verbreet, well eng Transformatioun op et applizéiert gëtt.

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