Сузылган сылтама
CSS аша ояланган сылтаманы "сузып" теләсә нинди HTML элементын яки Bootstrap компонентын басыгыз.
Псевдо элементы аша аның блогын.stretched-link
басу өчен сылтамага өстәгез . Күпчелек очракта, бу класс белән сылтама булган элементның чирттерелүен аңлата. Зинһар , CSSның ничек эшләвен искә төшерегез , күпчелек өстәл элементлары белән катнашып булмый.::after
position: relative;
.stretched-link
position
.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
сылтаманы төп элементтан читтә сузмас өчен монда өстәргә кирәк.
Сузылган сылтама белән махсус компонент
Бу махсус компонент өчен ниндидер урын иясе. Бу кайбер реаль дөнья эчтәлеген охшату өчен ясалган, һәм без монда компонентка бераз тән һәм зурлык бирү өчен кулланабыз.
Кайдадыр бар<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Сузылган сылтама белән баганалар
Бу бүтән махсус компонент өчен урын ияләренең тагын бер мисалы. Бу кайбер реаль дөнья эчтәлеген охшату өчен ясалган, һәм без монда компонентка бераз тән һәм зурлык бирү өчен кулланабыз.
Кайдадыр бар<div class="row g-0 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 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</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>