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. Maaloo hubadhu akkaataa CSS itti hojjetu kennameef , qaamolee gabatee irra caalaan waliin makamuu hin danda'u.::afterposition: relative;.stretched-linkposition.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

html

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

Qaamonni amala baay'een isaanii durtii hin qaban , kanaaf walqabsiisni qaama warraatiin ala akka hin diriirneef as position: relativedabaluu qabna ..position-relative

Qaama amala hidhaa diriiree qabu

Kun qabiyyee iddooqa tokko tokkoo qaama amalaaf. Qabiyyeen addunyaa dhugaa tokko tokko maal akka fakkaatu fakkeessuuf kan yaadame yoo ta'u, asitti qaamaafi guddina xiqqoo qaamaaf kennuudhaaf itti fayyadamaa jirra.

Bakka tokko dhaqi

html

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

Tarreewwan walitti hidhamiinsa diriirfame qaban

Fakkeenya biraa qabiyyee iddooqa qaama amala biraa kanaaf. Qabiyyeen addunyaa dhugaa tokko tokko maal akka fakkaatu fakkeessuuf kan yaadame yoo ta'u, asitti qaamaafi guddina xiqqoo qaamaaf kennuudhaaf itti fayyadamaa jirra.

Bakka tokko dhaqi

html

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

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.

html

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