Истегната врска

Направете кој било HTML елемент или компонента Bootstrap да може да се кликне со „растегнување“ на вгнездена врска преку CSS.

Додајте .stretched-linkна врска за да може неговиот блок да може да се кликне преку ::afterпсевдоелемент. Во повеќето случаи, тоа значи дека елементот со position: relative;кој содржи врска со .stretched-linkкласата може да се кликне.

Картичките имаат position: relativeстандардно во Bootstrap, така што во овој случај можете безбедно да ја додадете .stretched-linkкласата на врската во картичката без никакви други промени во HTML.

Повеќекратните врски и целите на допрете не се препорачуваат со истегнати врски. Сепак, некои positionи z-indexстилови можат да помогнат доколку тоа е потребно.

Картичка со истегната врска

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Оди некаде

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

Медиумските објекти стандардно немаат position: relative, затоа треба да го додадеме .position-relativeовде за да спречиме врската да се протега надвор од медиумскиот објект.

Медиуми со истегната врска

Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus.

Оди некаде

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

Колоните се position: relativeстандардно, така што колоните што може да се кликнат бараат само .stretched-linkкласа на врска. Меѓутоа, за да се протега врската преку цела .rowе потребна .position-staticна колоната и .position-relativeна редот.

Колони со истегната врска

Оди некаде

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

Идентификување на блокот што содржи

Ако се чини дека растегната врска не работи, најверојатно причината ќе биде блокот што содржи . Следниве својства на CSS ќе направат елемент кој содржи блок:

positionВредност различна одstatic
А transformили perspectiveвредност различна одnone
will-changeВредност од transformилиperspective
filterВредност различна од или noneвредност will-changeод filter(работи само на Firefox)

Картичка со истегнати врски

Истегната врска нема да работи овде, бидејќи position: relativeе додадена на врската

Оваа растегната врска ќе се шири само преку p-ознаката, бидејќи на неа се применува трансформација.

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