Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
Check
in English

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. Kia mahara me pehea te mahi a CSSposition , .stretched-linkkaore e taea te whakauru ki te nuinga o nga huānga ripanga.

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.

Card image cap
Kaari whai hononga toro

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

Ko te nuinga o nga waahanga ritenga karekau he position: relativetaunoa, no reira me taapiri i .position-relativekonei kia kore ai te hono e toro atu ki waho o te huānga matua.

Generic placeholder image
Waahanga ritenga me te hono totoro

Koinei etahi o nga ihirangi waahi mo te waahanga ritenga. Ko te tikanga kia peehia te ahua o etahi o nga ihirangi o te ao, a kei te whakamahia e matou i konei hei hoatu i te waahanga o te tinana me te rahi.

Haere ki tetahi wahi
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>
Generic placeholder image
Ngā tīwae whai hononga toro

Ko tetahi atu tauira o te ihirangi kaipupuri waahi mo tenei atu waahanga ritenga. Ko te tikanga kia peehia te ahua o etahi o nga ihirangi o te ao, a kei te whakamahia e matou i konei hei hoatu i te waahanga o te tinana me te rahi.

Haere ki tetahi wahi
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>

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)
Card image cap
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.

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>