Link diriirfame

Qaama HTML kamiyyuu ykn qaama Bootstrap kamiyyuu karaa CSS hidhaa nested “diriirsuun” akka cuqaafamuu danda’u godhi.

Uggurri isaa of keessaa qabu karaa elementii sobaa akka cuqaafamuu danda'u .stretched-linkgochuuf hidhaa irratti dabali . Yeroo baay'ee, kun qaamni tokko waliin hidhaa gita waliin qabu cuqaasuu danda'a jechuudha.::afterposition: relative;.stretched-link

Kaartoonni akka position: relativedurtiitti Bootstrap keessatti qabu, kanaafuu haala kana keessatti .stretched-linkjijjiirama HTML biroo tokko malee gita gara hidhaa kaardii keessa jirutti nagaadhaan dabaluu dandeessa.

Hidhamtoonni dachaa fi target tuquun hidhamtoota diriirfaman waliin hin gorfaman. Haa ta'u malee, tokko tokkoo positionfi z-indexakkaataaleen yoo kun barbaachise gargaaruu danda'u.

Kaardii walitti hidhamiinsa diriirfame qabu

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Bakka tokko dhaqi

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

Wantoonni miidiyaa durtii hin qaban , kanaaf walqabsiisni wanta miidiyaatiin ala akka hin diriirneef as position: relativedabaluu qabna ..position-relative

Miidiyaa linkii diriirfame qabu

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Bakka tokko dhaqi

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

Tarjaawwan position: relativedurtiidha, kanaafuu tarjaawwan cuqaafamuu danda'an .stretched-linkgita hidhaa irratti qofa barbaadu. Haa ta'u malee, hidhaa guutuu irratti diriirsuun tarjaa irratti fi tarree irratti .rowbarbaada ..position-static.position-relative

Tarreewwan walitti hidhamiinsa diriirfame qaban

Bakka tokko dhaqi

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

Blookii of keessaa qabu adda baasuu

Yoo hidhiin diriire waan hojjetu hin fakkaatu, uggurri of keessaa qabu sababa ta'uu hin oolu. Amaloonni CSS armaan gadii elementii tokko uggura of keessaa qabu ni godhu:

Gatii positionkan biraastatic
A transformykn perspectivegatii kan biraatiin alanone
will-changeGatii transformykn _perspective
Gatiin filterala noneykn will-changegatii filter(Firefox qofa irratti hojjeta) .

Kaardii walitti hidhamiinsa diriirfame qabu

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Link diriirfame asitti hin hojjetu, sababiin isaas position: relativelink irratti dabalameera

Hidhiin diriirfame kun -tag qofa irratti ni babal'ata p, sababni isaas jijjiirraan itti hojii irra oola.

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