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.

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.

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 rudaí meán position: relativede réir réamhshocraithe, agus mar sin ní mór dúinn a chur leis .position-relativeanseo chun cosc a chur ar an nasc ó síneadh taobh amuigh den réad meáin.

Meáin le nasc sínte

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Téigh áit éigin

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

Colúin atá i gceist position: relativede réir réamhshocraithe, mar sin ní theastaíonn ach an .stretched-linkrang ar nasc le colúin inchliceáilte. .rowMar sin féin, éilíonn síneadh nasc thar iomlán .position-staticar an gcolún agus .position-relativear an tsraith.

Colúin le nasc sínte

Téigh áit éigin

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

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 transformnó perspectiveluach seachasnone
Tá will-changeluach transformnóperspective
Luach filterseachas nonenó will-changeluach de filter(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: 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>