loulou kikoo

E hana i kekahi mea HTML a i ʻole ʻāpana Bootstrap hiki ke kaomi ʻia e ka "kau" i kahi loulou nested ma o CSS.

E hoʻohui .stretched-linki kahi loulou e hiki ke kaomi i kāna poloka ma o kahi mea ::afterpseudo. I ka hapanui o nā hihia, ʻo ia hoʻi, hiki ke kaomi i kahi mea me position: relative;ka loulou me ka .stretched-linkpapa.

Loaʻa nā kāleka position: relativema Bootstrap, no laila hiki iā ʻoe ke hoʻohui i ka .stretched-linkpapa i kahi loulou i ke kāleka me ka ʻole o nā hoʻololi HTML ʻē aʻe.

ʻAʻole ʻōlelo ʻia nā loulou he nui a me ka paʻi ʻana me nā loulou kikoo. Eia naʻe, hiki i kekahi positiona me z-indexnā ʻano ke kōkua inā pono kēia.

Kāleka me ka loulou lohi

ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.

Hele i kahi

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

ʻAʻole loaʻa i nā mea Media position: relativema ke ʻano maʻamau, no laila pono mākou e hoʻohui i .position-relativekēia e pale aku i ka loulou mai ka hohola ʻana ma waho o ka mea media.

Media me ka loulou kikoo

Cras noho 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.

Hele i kahi

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

He position: relativepaʻamau nā kolamu, no laila, pono nā kolamu hiki ke kaomi i ka .stretched-linkpapa ma kahi loulou. .rowEia nō naʻe, pono ke kikoo ʻana i kahi loulou .position-staticma ke kolamu a .position-relativema ka lālani.

Nā kolamu me ka loulou kikoo

Hele i kahi

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

ʻIke ʻana i ka poloka i loaʻa

Inā ʻaʻole e holo ka loulou, ʻo ia paha ke kumu. E hoʻolilo ʻia nā waiwai CSS ma lalo nei i kahi mea i loko o ka poloka:

He positionwaiwai ʻē aʻestatic
A i transformʻole perspectiveka waiwai ʻē aʻenone
He will-changewaiwai o a i transformoleperspective
He filterwaiwai ʻē aʻe nonea i ʻole he will-changewaiwai o filter(hana wale nō ma Firefox)

Kāleka me nā loulou kikoo

ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.

ʻAʻole e hana ʻia ka loulou ʻōlima ma ʻaneʻi, no ka mea position: relativeua hoʻohui ʻia i ka loulou

E hohola wale ʻia kēia loulou ma luna o ka p-tag, no ka mea, hoʻohana ʻia kahi hoʻololi iā ia.

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