Hononga toro

Hangaia tetahi huānga HTML me tetahi waahanga Bootstrap ka taea te panui ma te "toro" he hononga kohanga ma te CSS.

Tāpirihia .stretched-linkki te hono kia taea ai te paato i te paraka kei roto ma te ::afterhuānga pseudo. I te nuinga o nga wa, ko te tikanga ko tetahi huānga position: relative;kei roto he hononga ki te .stretched-linkakomanga ka taea te panui.

Ko nga kaari he position: relativetaunoa kei Bootstrap, na i tenei keehi ka taea e koe te taapiri i te .stretched-linkkaraehe ki te hono ki te kaari kaore he huringa HTML.

Ko nga hononga maha me nga whaainga tap kaore i te tūtohutia me nga hononga totoro. Heoi, ka taea e etahi positionme z-indexnga momo te awhina mena ka hiahiatia tenei.

Kaari me te hono totoro

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Haere ki tetahi wahi

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

Karekau he position: relativetaunoa o nga ahanoa pāpāho, no reira me taapiri i .position-relativekonei kia kore ai te hono e toro atu ki waho o te ahanoa pāpāho.

Media me te hono totoro

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Haere ki tetahi wahi

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

Ko nga tīwae he position: relativetaunoa, no reira ko nga pou ka taea te panui me hiahia te .stretched-linkkaraehe ki runga hononga. Heoi, ko te toronga hononga ki runga i te katoa .rowka hiahia .position-staticki te pou me .position-relativete rarangi.

Ngā tīwae whai hononga toro

Haere ki tetahi wahi

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

Te tautuhi i te poraka kei roto

Ki te ahua kore e mahi te hononga totoro, ko te paraka kei roto pea te take. Ko nga ahuatanga CSS e whai ake nei ka waiho he huānga hei poraka kei roto:

He positionuara atu istatic
He uara atu transformraneiperspectivenone
He will-changeuara o transformraneiperspective
He filteruara ke atu i nonete will-changeuara ranei o filter(mahi anake ki Firefox)

Kaari me nga hononga totoro

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Karekau e mahi te hono totoro ki konei, na te mea position: relativekua honoa ki te hono

Ka horahia tenei hononga totoro ki runga i te p-tag, na te mea ka tukuna he huringa ki runga.

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