Girêdana dirêjkirî

Her hêmanek HTML-ê an pêkhatek Bootstrap-ê ku bi "rêvekirina" girêdanek hêlînkirî bi CSS-ê ve were klîk kirin, bikin.

Zencîreyek zêde .stretched-linkbikin da ku bloka wê ya tê de bi riya ::afterhêmanek pseudo ve were klîk kirin. Di pir rewşan de, ev tê vê wateyê ku hêmanek pê re position: relative;girêdanek bi .stretched-linkpolê re tê klîk kirin.

Kartên ji position: relativehêla xwerû ve di Bootstrap-ê de hene, ji ber vê yekê hûn dikarin bi ewlehî .stretched-linkpolê li ser girêdanek di qertê de bêyî ku guhartinên din ên HTML-ê lê zêde bikin.

Gelek girêdan û armancên tap bi girêdanên dirêjkirî nayê pêşniyar kirin. Lêbelê, hin positionû z-indexşêwaz dikarin bibin alîkar ku ev hewce be.

Karta bi girêdana dirêjkirî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Biçe cihekî

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

Tiştên medyayê ji hêla xwerû ve tune ne position: relative, ji ber vê yekê em hewce ne ku li .position-relativevir zêde bikin da ku rê li ber dirêjkirina girêdanê li derveyî tiştê medyayê bigirin.

Medya bi girêdana dirêjkirî

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 li faucibus.

Biçe cihekî

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

Stûn ji position: relativehêla xwerû ve ne, ji ber vê yekê stûnên klîk tenê .stretched-linkpola li ser girêdanek hewce dikin. Lêbelê, dirêjkirina girêdanek li ser tevahî li ser stûn û rêzê .rowhewce dike ..position-static.position-relative

Stûnên bi girêdana dirêjkirî

Biçe cihekî

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

Naskirina bloka têde

Ger girêdana dirêjkirî nexebite, dibe ku bloka tê de bibe sedem. Taybetmendiyên CSS-ê yên jêrîn dê hêmanek bloka têde bikin:

Nirxek positionji bilîstatic
A transforman perspectivenirxa din ji bilînone
Nirxa an will-change_transformperspective
Nirxek filterji bilî nonean will-changenirxek filter(tenê li ser Firefox-ê dixebite)

Karta bi girêdanên dirêjkirî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Zencîreya dirêjkirî dê li vir nexebite, ji ber ku position: relativeli zencîreyê hatî zêdekirin

Ev girêdana dirêjkirî dê tenê li ser p-tagê belav bibe, ji ber ku veguherînek jê re tê sepandin.

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