Txuas txuas
Ua ib qho HTML keeb lossis Bootstrap tivthaiv nyem tau los ntawm "stretching" qhov txuas txuas ntawm CSS.
Ntxiv .stretched-link
rau qhov txuas los ua kom nws muaj cov block clickable ntawm lub ::after
ntsiab lus pseudo. Feem ntau, qhov no txhais tau hais tias ib qho khoom position: relative;
uas muaj qhov txuas nrog cov .stretched-link
chav kawm yog clickable.
Daim npav muaj position: relative
los ntawm lub neej ntawd hauv Bootstrap, yog li hauv qhov no koj tuaj yeem ruaj ntseg ntxiv cov .stretched-link
chav 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 position
thiab z-index
cov 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 twgCov khoom siv xov xwm tsis muaj position: relative
los ntawm lub neej ntawd, yog li peb yuav tsum tau ntxiv qhov .position-relative
no 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 twgCov kab yog position: relative
los ntawm lub neej ntawd, yog li cov kab clickable tsuas yog xav tau cov .stretched-link
chav kawm ntawm qhov txuas. Txawm li cas los xij, ncab ib qhov txuas hla ib qho tag nrho .row
yuav tsum muaj .position-static
nyob rau hauv kab thiab .position-relative
ntawm kab.
Kem nrog ncab 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 twgTxheeb 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
position
nqi uas tsis yogstatic
- A
transform
los yogperspective
tus nqi uas tsis yognone
- Tus
will-change
nqi ntawmtransform
los yogperspective
- Tus
filter
nqi uas tsisnone
yog lossis tuswill-change
nqi ntawmfilter
(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: relative
yog ntxiv rau qhov txuas
Qhov txuas txuas no tsuas yog nthuav tawm ntawm p
-tag, vim tias kev hloov pauv tau siv rau nws.