Развучена веза
Учините клик на било који ХТМЛ елемент или компоненту Боотстрап тако што ћете „развући“ угнежђену везу преко ЦСС-а.
Додајте .stretched-link
линку да бисте омогућили кликање на блок који садржи::after
псеудо елемент. У већини случајева то значи да се на елемент position: relative;
који садржи везу са .stretched-link
класом може кликнути.
Картице се position: relative
подразумевано налазе у Боотстрапу, тако да у овом случају можете безбедно да додате .stretched-link
класу линку на картици без икаквих других ХТМЛ промена.
Више веза и мете за додир се не препоручују са растегнутим везама. Међутим, неки position
и z-index
стилови могу помоћи ако је то потребно.
Картица са растегнутом везом
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Иди негдеМедијски објекти немају position: relative
подразумевано, тако да морамо да додамо .position-relative
овде да спречимо да се веза растеже изван медијског објекта.
Медији са растегнутом везом
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Иди негдеКолоне су position: relative
подразумевано, тако да колоне на које се може кликнути захтевају само .stretched-link
класу на линку. Међутим, истезање везе преко целине .row
захтева .position-static
на колони и .position-relative
на реду.
Колоне са растегнутом везом
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Иди негдеИдентификовање блока који садржи
Ако изгледа да растегнута веза не функционише, вероватно ће узрок бити блок који садржи . Следећа ЦСС својства ће елемент учинити блоком који садржи:
- Вредност
position
осимstatic
- А
transform
илиperspective
вредност која нијеnone
will-change
Вредностtransform
или _perspective
filter
Вредност која нијеnone
илиwill-change
вредност (filter
ради само на Фирефок-у)
Картица са растегнутим везама
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Развучена веза овде неће радити, јер position: relative
је додата линку
Ова растегнута веза ће се ширити само преко p
ознаке -ознаке, јер се на њу примењује трансформација.