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-link
i se feso'ota'iga ina ia mafai ona kiliki le poloka o lo'o i ai e ala i se ::after
elemene 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-link
vasega e mafai ona kiliki. Fa'amolemole maitau pe fa'apefea ona galue le CSSposition
, .stretched-link
e le mafai ona fa'afefiloi ma le tele o elemene laulau.
O kata position: relative
e le mafai ona faʻaogaina i Bootstrap, o lea i lenei tulaga e mafai ona e faʻapipiʻi saogalemu le .stretched-link
vasega 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 position
ma z-index
sitaili 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<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: relative
fa'aletonu, o lea e mana'omia ai le fa'aopoopo .position-relative
i'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<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<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
position
tau e ese maistatic
- A
transform
po'operspective
le tau e ese mainone
- O se
will-change
taua otransform
peperspective
- Se
filter
tau e ese mainone
po'o sewill-change
tau ofilter
(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: relative
ua 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.
<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>