Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

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-linkle nasc é chun a bhloc ina bhfuil a bheith inchliceáilte trí ::aftereilimint 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-linkrang. Tabhair faoi deara le do thoil mar a oibríonn CSSposition , .stretched-linkní féidir é a mheascadh leis an gcuid is mó de na heilimintí tábla.

Tá cártaí position: relativeag Bootstrap de réir réamhshocraithe, mar sin sa chás seo is féidir leat an .stretched-linkrang 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 positionagus z-indexstíleanna cabhrú má tá sé seo ag teastáil.

Card image cap
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: relativede réir réamhshocraithe, agus mar sin ní mór dúinn an ceann .position-relativeseo a chur leis chun an nasc a chosc ó shíneadh lasmuigh den eilimint tuismitheora.

Generic placeholder image
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 ábhar éigin ón bhfíorshaol, 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>
Generic placeholder image
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 ábhar éigin ón bhfíorshaol, 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 positioneile seachasstatic
  • A transformperspectiveluach seachasnone
  • will-changeluach transformperspective
  • Luach filterseachas nonewill-changeluach de filter(ní oibríonn ach ar Firefox)
Card image cap
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: relativego 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>