Isku xirka fidsan
Ka dhig wax kasta oo HTML ah ama qayb ka mid ah Bootstrap la riixi karo adiga oo "fidin" xiriiriye buul leh oo loo maro CSS.
Ku dar .stretched-link
xiriirinta si aad block-ka ku jirta uga dhigto mid la gujin karo iyada oo loo marayo curiyaha been ::after
abuurka ah. Inta badan, tani waxay la macno tahay in shay ka position: relative;
kooban xidhiidhiye .stretched-link
fasalka la riixi karo. Fadlan ogow marka la eego sida CSS position
u shaqeeyo , .stretched-link
laguma qasi karo inta badan walxaha miiska.
Kaadhadhku waxay position: relative
si caadi ah ugu leeyihiin Bootstrap, markaa kiiskan waxaad si badbaado leh ugu dari kartaa .stretched-link
fasalka isku xirka kaadhka iyada oo aan wax HTML ah isbeddelin.
Xidhiidho badan iyo bartilmaameedyo qasabad ah laguma talinayo xiriirin fidsan. Si kastaba ha ahaatee, qaar position
iyo z-index
qaabab ayaa ku caawin kara haddii tan loo baahdo.
Kaarka xiriir fidsan
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Meel tag<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>
Inta badan qaybaha caadooyinka ma laha position: relative
si caadi ah, markaa waxaan u baahanahay inaan ku darno .position-relative
halkan si aan uga hortagno isku xirka inuu ku fido meel ka baxsan xubinta waalidka.
Qayb gaar ah oo leh xiriir fidsan
Tani waa qaar ka mid ah waxyaabaha ku jira meeleeyaha qaybta gaarka ah. Waxaa loogu talagalay in lagu daydo sida ay u ekaan karaan waxyaabaha dhabta ah ee dunida ka jira, waxaanan u isticmaaleynaa halkan si aan u siino qaybta xoogaa jir iyo cabbir ah.
Meel tag<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>
Tiirar xiriir fidsan leh
Tusaale kale oo ka mid ah waxyaabaha ku jira meeleeyaha qaybtan kale ee gaarka ah. Waxaa loogu talagalay in lagu daydo sida ay u ekaan karaan waxyaabaha dhabta ah ee dunida ka jira, waxaanan u isticmaaleynaa halkan si aan u siino qaybta xoogaa jir iyo cabbir ah.
Meel tag<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>
Aqoonsiga block ka kooban
Haddii xiriirka fidsan uusan u muuqan inuu shaqeynayo, xannibaadda ku jirta waxay u badan tahay inay tahay sababta. Guryaha CSS ee soo socda waxay ka dhigi doonaan curiye block ka kooban:
- Qiimo
position
aan ahaynstatic
- A
transform
amaperspective
qiimo kale oo aan ahaynnone
- Qiimaha ama
will-change
_transform
perspective
- Qiimo
filter
aan ahaynnone
amawill-change
qiimihiisu yahayfilter
(kaliya waxa uu ku shaqeeyaa Firefox)
Kaar leh xiriirin fidsan
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Xiriirintan fidsan ayaa kaliya lagu faafin doonaa p
-tag, sababtoo ah isbeddel ayaa lagu dabaqayaa.
<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>