Nasc sínte
Déan aon eilimint HTML nó comhpháirt Bootstrap a chliceáil trí nasc neadaithe a “shíneadh” trí CSS.
Cuir .stretched-link
le nasc é chun a bhloc ina bhfuil a bheith inchliceáilte trí ::after
eilimint bhréagach. I bhformhór na gcásanna, ciallaíonn sé seo gur féidir cliceáil ar eilimint leis position: relative;
a bhfuil nasc leis an .stretched-link
rang. Tabhair faoi deara le do thoil mar a oibríonn CSSposition
, .stretched-link
ní féidir é a mheascadh leis an gcuid is mó de na heilimintí tábla.
Tá cártaí position: relative
ag Bootstrap de réir réamhshocraithe, mar sin sa chás seo is féidir leat an .stretched-link
rang a chur go sábháilte le nasc sa chárta gan aon athruithe HTML eile.
Ní mholtar naisc iolracha agus spriocanna sconna le naisc shínte. Mar sin féin, is féidir le roinnt position
agus z-index
stíleanna cabhrú má tá sé seo ag teastáil.
Cárta le nasc sínte
Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.
Téigh áit éigin<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>
Ní bhíonn an chuid is mó de na comhpháirteanna saincheaptha position: relative
de réir réamhshocraithe, agus mar sin ní mór dúinn an ceann .position-relative
seo a chur leis chun an nasc a chosc ó shíneadh lasmuigh den eilimint tuismitheora.
Comhpháirt saincheaptha le nasc sínte
Seo roinnt ábhar áitsealbhóra don chomhpháirt saincheaptha. Tá sé i gceist aithris a dhéanamh ar an chuma a bheadh ar roinnt ábhar ón saol fíor, agus táimid á úsáid anseo chun beagán coirp agus méid a thabhairt don chomhpháirt.
Téigh áit éigin<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>
Colúin le nasc sínte
Sampla eile d’inneachar ionadsealbhóra don chomhpháirt shaincheaptha eile seo. Tá sé i gceist aithris a dhéanamh ar an chuma a bheadh ar roinnt ábhar ón saol fíor, agus táimid á úsáid anseo chun beagán coirp agus méid a thabhairt don chomhpháirt.
Téigh áit éigin<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>
An bloc ina bhfuil a aithint
Más cosúil nach n-oibríonn an nasc sínte, is dócha gurb é an bloc ina bhfuil an chúis. Déanfaidh na hairíonna CSS seo a leanas eilimint den bhloc ina bhfuil:
- Luach
position
eile seachasstatic
- A
transform
nóperspective
luach seachasnone
- Tá
will-change
luachtransform
nóperspective
- Luach
filter
seachasnone
nówill-change
luach defilter
(ní oibríonn ach ar Firefox)
Cárta le naisc sínte
Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.
Ní oibreoidh nasc sínte anseo, toisc position: relative
go gcuirtear leis an nasc é
Ní leathfar an nasc sínte seo ach thar an p
-chlib, toisc go gcuirtear claochlú i bhfeidhm air.
<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>