Развучена веза

Учините клик на било који ХТМЛ елемент или компоненту Боотстрап тако што ћете „развући“ угнежђену везу преко ЦСС-а.

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

Картице се position: relativeподразумевано налазе у Боотстрапу, тако да у овом случају можете безбедно да додате .stretched-linkкласу линку на картици без икаквих других ХТМЛ промена.

Више веза и мете за додир се не препоручују са растегнутим везама. Међутим, неки 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овде да спречимо да се веза растеже изван медијског објекта.

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

Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.

Иди негде

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

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

Ако изгледа да растегнута веза не функционише, вероватно ће узрок бити блок који садржи . Следећа ЦСС својства ће елемент учинити блоком који садржи:

Вредност positionосимstatic
А transformили perspectiveвредност која нијеnone
will-changeВредност transformили _perspective
filterВредност која није noneили will-changeвредност ( filterради само на Фирефок-у)

Картица са растегнутим везама

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

Развучена веза овде неће радити, јер 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>