Ceangal sìnte

Dèan cliogadh air eileamaid HTML no co-phàirt Bootstrap le bhith “a’ sìneadh ”ceangal neadachaidh tro CSS.

Cuir .stretched-linkri ceangal gus am bi am bloc anns a bheil e comasach cliogadh tro ::aftereileamaid bhrèige. Anns a’ mhòr-chuid de chùisean, tha seo a’ ciallachadh gum faodar cliogadh air eileamaid leis position: relative;a bheil ceangal ris a’ .stretched-linkchlas.

Tha cairtean position: relativeann am Bootstrap gu bunaiteach, agus mar sin anns a’ chùis seo faodaidh tu an .stretched-linkclas a chuir gu ceangal sa chairt gu sàbhailte gun atharrachadh HTML sam bith eile.

Chan eilear a’ moladh ioma-cheanglaichean agus targaidean tap le ceanglaichean sìnte. Ach, faodaidh cuid positionagus z-indexstoidhlichean cuideachadh ma bhios feum air.

Cairt le ceangal sìnte

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Rach àiteigin

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

Chan eil nithean meadhanan position: relativemar as àbhaist, agus mar sin feumaidh sinn an .position-relativeseo a chuir ris gus casg a chuir air a’ cheangal bho bhith a’ sìneadh taobh a-muigh nì nam meadhanan.

Meadhanan le ceangal sìnte

Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.

Rach àiteigin

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

Tha colbhan gu position: relativeh-àbhaisteach, agus mar sin chan fheum colbhan a ghabhas cliogadh ach an .stretched-linkclas air ceangal. .rowAch, feumar ceangal a shìneadh thairis air fad .position-staticair a’ cholbh agus .position-relativeair an t-sreath.

Colbhan le ceangal sìnte

Rach àiteigin

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

A 'comharrachadh a' bhloc anns a bheil

Mura h-eil coltas gu bheil an ceangal sìnte ag obair, is dòcha gur e am bloc anns a bheil e as coireach. Nì na feartan CSS a leanas eileamaid anns a’ bhloc anns a bheil:

Luach positioneile seachstatic
A transformno perspectiveluach a bharrachd airnone
Tha will-changeluach transformorperspective
filterLuach eile seach noneno will-changeluach filter(ag obair air Firefox a-mhàin )

Cairt le ceanglaichean sìnte

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Chan obraich ceangal sìnte an seo, oir position: relativetha e air a chur ris a’ cheangal

Cha tèid an ceangal sìnte seo a sgaoileadh ach thairis air an p-tag, leis gu bheil cruth-atharrachaidh ga chur an sàs.

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