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-linkxiriirinta si aad block-ka ku jirta uga dhigto mid la gujin karo iyada oo loo marayo curiyaha been ::afterabuurka ah. Inta badan, tani waxay la macno tahay in shay ka position: relative;kooban xidhiidhiye .stretched-linkfasalka la riixi karo. Fadlan ogow marka la eego sida CSS positionu shaqeeyo , .stretched-linklaguma qasi karo inta badan walxaha miiska.

Kaadhadhku waxay position: relativesi caadi ah ugu leeyihiin Bootstrap, markaa kiiskan waxaad si badbaado leh ugu dari kartaa .stretched-linkfasalka 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 positioniyo z-indexqaabab 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: relativesi caadi ah, markaa waxaan u baahanahay inaan ku darno .position-relativehalkan 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 positionaan ahaynstatic
A transformama perspectiveqiimo kale oo aan ahaynnone
Qiimaha ama will-change_transformperspective
Qiimo filteraan ahayn noneama will-changeqiimihiisu yahay filter(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.

Xidhiidhka fidsan halkan kuma shaqayn doono, sababtoo ah position: relativewaxa lagu daraa xidhiidhka

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>