Txuas txuas

Ua ib qho HTML keeb lossis Bootstrap tivthaiv nyem tau los ntawm "stretching" qhov txuas txuas ntawm CSS.

Ntxiv .stretched-linkrau qhov txuas los ua kom nws muaj cov block clickable ntawm lub ::afterntsiab lus pseudo. Feem ntau, qhov no txhais tau hais tias ib qho khoom position: relative;uas muaj qhov txuas nrog cov .stretched-linkchav kawm yog clickable.

Daim npav muaj position: relativelos ntawm lub neej ntawd hauv Bootstrap, yog li hauv qhov no koj tuaj yeem ruaj ntseg ntxiv cov .stretched-linkchav kawm rau qhov txuas hauv daim npav yam tsis muaj lwm yam hloov pauv HTML.

Ntau qhov txuas thiab kais lub hom phiaj tsis pom zoo nrog cov txuas txuas. Txawm li cas los xij, qee qhov positionthiab z-indexcov qauv tuaj yeem pab tau yog tias qhov no xav tau.

Card nrog stretched txuas

Qee cov ntawv piv txwv ceev los tsim cov npe ntawm daim npav thiab ua kom muaj ntau ntawm daim npav cov ntsiab lus.

Mus qhov twg

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

Cov khoom siv xov xwm tsis muaj position: relativelos ntawm lub neej ntawd, yog li peb yuav tsum tau ntxiv qhov .position-relativeno los tiv thaiv qhov txuas los ntawm kev ncab sab nraum cov khoom siv xov xwm.

Media nrog stretched txuas

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

Mus qhov twg

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

Cov kab yog position: relativelos ntawm lub neej ntawd, yog li cov kab clickable tsuas yog xav tau cov .stretched-linkchav kawm ntawm qhov txuas. Txawm li cas los xij, ncab ib qhov txuas hla ib qho tag nrho .rowyuav tsum muaj .position-staticnyob rau hauv kab thiab .position-relativentawm kab.

Kem nrog ncab txuas

Mus qhov twg

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

Txheeb xyuas qhov muaj qhov thaiv

Yog tias qhov txuas txuas tsis zoo li tsis ua haujlwm, qhov muaj qhov thaiv yuav yog qhov ua rau. Cov nram qab no CSS cov khoom yuav ua rau cov khoom muaj cov thaiv:

Tus positionnqi uas tsis yogstatic
A transformlos yog perspectivetus nqi uas tsis yognone
Tus will-changenqi ntawm transformlos yogperspective
Tus filternqi uas tsis noneyog lossis tus will-changenqi ntawm filter(tsuas yog ua haujlwm ntawm Firefox)

Daim npav nrog stretched txuas

Qee cov ntawv piv txwv ceev los tsim cov npe ntawm daim npav thiab ua kom muaj ntau ntawm daim npav cov ntsiab lus.

Stretched link yuav tsis ua hauj lwm ntawm no, vim position: relativeyog ntxiv rau qhov txuas

Qhov txuas txuas no tsuas yog nthuav tawm ntawm p-tag, vim tias kev hloov pauv tau siv rau nws.

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