Source

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.

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>

Walxaha warbaahintu 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 shayga warbaahinta.

Warbaahinta xiriir fidsan

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.

Meel tag

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

Tiirarku waa position: relativehab caadi ah, markaa tiirarka la riixi karo waxay u baahan yihiin kaliya .stretched-linkfasalka isku xirka. Si kastaba ha ahaatee, isku-fidinta isku-xidhka guud ahaan .rowwaxay u baahan tahay .position-statictiirka iyo .position-relativesafka.

Tiirar xiriir fidsan leh

Meel tag

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

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>