So'oga fa'aloloa

Faia so'o se elemene HTML po'o se vaega Bootstrap e mafai ona kiliki e ala i le "fa'aloaloa" se feso'ota'iga e ala i le CSS.

Fa'aopoopo .stretched-linki se feso'ota'iga ina ia mafai ona kiliki le poloka o lo'o i ai e ala i se ::afterelemene fa'afoliga. I le tele o tulaga, o lona uiga o se elemene position: relative;o loʻo i ai se sootaga ma le .stretched-linkvasega e mafai ona kiliki. Fa'amolemole maitau pe fa'apefea ona galue le CSSposition , .stretched-linke le mafai ona fa'afefiloi ma le tele o elemene laulau.

O kata position: relativee le mafai ona faʻaogaina i Bootstrap, o lea i lenei tulaga e mafai ona e faʻapipiʻi saogalemu le .stretched-linkvasega i se fesoʻotaʻiga i le kata e aunoa ma se isi suiga HTML.

E le fautuaina le tele o feso'ota'iga ma ta'i fa'atasi ma so'otaga fa'aloloa. Ae ui i lea, o nisi positionma z-indexsitaili e mafai ona fesoasoani pe a manaʻomia lenei mea.

Kata o lo'o iai so'otaga fa'aloloa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Alu i se mea

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>

O le tele o vaega fa'ale-aganu'u e leai ni position: relativefa'aletonu, o lea e mana'omia ai le fa'aopoopo .position-relativei'i e taofia ai le so'otaga mai le fa'aloloa i fafo atu o le elemene matua.

Vaega fa'apitoa fa'atasi ai ma so'otaga fa'aloloa

O nisi nei mea o lo'o tu'u iai mo le vaega masani. O lo'o fa'amoemoe e fa'ata'ita'i pe fa'aa foliga o nisi mea moni o le lalolagi, ma o lo'o matou fa'aogaina iinei e tu'u ai i le vaega sina vaega o le tino ma le lapo'a.

Alu i se mea

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>

Koluma o lo'o iai so'oga fa'aloloa

O le isi fa'ata'ita'iga o mea e tu'u ai mea mo le isi vaega fa'ale-aganu'u. O lo'o fa'amoemoe e fa'ata'ita'i pe fa'aa foliga o nisi mea moni o le lalolagi, ma o lo'o matou fa'aogaina iinei e tu'u ai i le vaega sina vaega o le tino ma le lapo'a.

Alu i se mea

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>

Fa'ailoaina le poloka o lo'o i ai

Afai e foliga mai e le aoga le so'otaga fa'aloloa , atonu o le poloka o lo'o i ai le mafua'aga. O mea nei CSS o le a avea ai se elemene ma poloka poloka:

O se positiontau e ese maistatic
A transformpo'o perspectivele tau e ese mainone
O se will-changetaua o transformpeperspective
Se filtertau e ese mai nonepo'o se will-changetau o filter(na'o Firefox e galue)

Kata o lo'o iai so'otaga fa'aloloa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

O le a le aoga le so'oga fa'alolo iinei, aua position: relativeua fa'aopoopo i le so'oga

O lenei so'oga fa'aloloa o le a na'o le fa'asalalauina i luga o le p-tag, ona o se suiga e fa'atatau i ai.

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>