നീട്ടിയ ലിങ്ക്
CSS വഴി ഒരു നെസ്റ്റഡ് ലിങ്ക് "വലിച്ചുനീട്ടുക" വഴി ഏതെങ്കിലും HTML ഘടകമോ ബൂട്ട്സ്ട്രാപ്പ് ഘടകമോ ക്ലിക്ക് ചെയ്യാവുന്നതാക്കുക.
ഒരു സ്യൂഡോ എലമെന്റ് വഴി അതിൽ അടങ്ങിയിരിക്കുന്ന ബ്ലോക്ക് ക്ലിക്കുചെയ്യാൻ .stretched-link
ഒരു ലിങ്കിലേക്ക് ചേർക്കുക . മിക്ക കേസുകളിലും, ക്ലാസുമായി ഒരു ലിങ്ക് അടങ്ങിയിരിക്കുന്ന ഒരു ഘടകം ക്ലിക്ക് ചെയ്യാവുന്നതാണെന്നാണ് ഇതിനർത്ഥം . CSS എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക , മിക്ക പട്ടിക ഘടകങ്ങളുമായി മിക്സ് ചെയ്യാൻ കഴിയില്ല.::after
position: relative;
.stretched-link
position
.stretched-link
കാർഡുകൾക്ക് position: relative
സ്ഥിരസ്ഥിതിയായി ബൂട്ട്സ്ട്രാപ്പിൽ ഉണ്ട്, അതിനാൽ ഈ സാഹചര്യത്തിൽ നിങ്ങൾക്ക് .stretched-link
മറ്റ് HTML മാറ്റങ്ങളൊന്നും കൂടാതെ കാർഡിലെ ഒരു ലിങ്കിലേക്ക് ക്ലാസ് സുരക്ഷിതമായി ചേർക്കാൻ കഴിയും.
സ്ട്രെച്ചഡ് ലിങ്കുകൾക്കൊപ്പം ഒന്നിലധികം ലിങ്കുകളും ടാപ്പ് ടാർഗെറ്റുകളും ശുപാർശ ചെയ്യുന്നില്ല. എന്നിരുന്നാലും, ഇത് ആവശ്യമെങ്കിൽ ചില ശൈലികളും സഹായിക്കും position
.z-index
നീട്ടിയ ലിങ്കുള്ള കാർഡ്
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും ഉണ്ടാക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
എവിടെയെങ്കിലും പോകൂ<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>
മീഡിയ ഒബ്ജക്റ്റുകൾക്ക് ഡിഫോൾട്ടായി ഇല്ല , അതിനാൽ മീഡിയ ഒബ്ജക്റ്റിന് പുറത്ത് ലിങ്ക് നീട്ടുന്നത് തടയാൻ position: relative
ഞങ്ങൾ ഇവിടെ ചേർക്കേണ്ടതുണ്ട് ..position-relative
നീട്ടിയ ലിങ്കുള്ള മീഡിയ
മീഡിയ ഒബ്ജക്റ്റിനായുള്ള ചില പ്ലെയ്സ്ഹോൾഡർ ഉള്ളടക്കമാണിത്. ചില യഥാർത്ഥ ഉള്ളടക്കം എങ്ങനെയായിരിക്കുമെന്ന് അനുകരിക്കാനാണ് ഇത് ഉദ്ദേശിക്കുന്നത്, ഘടകത്തിന് അൽപ്പം ശരീരവും വലുപ്പവും നൽകാൻ ഞങ്ങൾ ഇത് ഇവിടെ ഉപയോഗിക്കുന്നു.
എവിടെയെങ്കിലും പോകൂ<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>This is some placeholder content for the media object. 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>
കോളങ്ങൾ ഡിഫോൾട്ടായതിനാൽ ക്ലിക്കുചെയ്യാനാകുന്ന കോളങ്ങൾക്ക് ഒരു ലിങ്കിലെ ക്ലാസ് position: relative
മാത്രമേ ആവശ്യമുള്ളൂ . .stretched-link
എന്നിരുന്നാലും, ഒരു ലിങ്ക് മൊത്തത്തിൽ നീട്ടുന്നതിന് നിരയിലും വരിയിലും .row
ആവശ്യമാണ് ..position-static
.position-relative
നീട്ടിയ ലിങ്കുള്ള നിരകൾ
ഈ മറ്റ് ഇഷ്ടാനുസൃത ഘടകത്തിനായുള്ള പ്ലെയ്സ്ഹോൾഡർ ഉള്ളടക്കത്തിന്റെ മറ്റൊരു ഉദാഹരണം. ചില യഥാർത്ഥ ഉള്ളടക്കം എങ്ങനെയായിരിക്കുമെന്ന് അനുകരിക്കാനാണ് ഇത് ഉദ്ദേശിക്കുന്നത്, ഘടകത്തിന് അൽപ്പം ശരീരവും വലുപ്പവും നൽകാൻ ഞങ്ങൾ ഇത് ഇവിടെ ഉപയോഗിക്കുന്നു.
എവിടെയെങ്കിലും പോകൂ<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>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>
അടങ്ങുന്ന ബ്ലോക്ക് തിരിച്ചറിയുന്നു
നീട്ടിയ ലിങ്ക് പ്രവർത്തിക്കുന്നില്ലെന്ന് തോന്നുന്നുവെങ്കിൽ, അടങ്ങുന്ന ബ്ലോക്ക് ആയിരിക്കും കാരണം. ഇനിപ്പറയുന്ന CSS പ്രോപ്പർട്ടികൾ ഒരു ഘടകത്തെ അടങ്ങുന്ന ബ്ലോക്ക് ആക്കും:
- അല്ലാതെ മറ്റൊരു
position
മൂല്യംstatic
- എ
transform
അല്ലെങ്കിൽ അല്ലാതെയുള്ളperspective
മൂല്യംnone
- ഒരു
will-change
മൂല്യംtransform
അല്ലെങ്കിൽperspective
filter
അല്ലാതെ മറ്റൊരു മൂല്യം അല്ലെങ്കിൽnone
ഒരുwill-change
മൂല്യംfilter
(ഫയർഫോക്സിൽ മാത്രം പ്രവർത്തിക്കുന്നു)
നീട്ടിയ ലിങ്കുകളുള്ള കാർഡ്
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും ഉണ്ടാക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
സ്ട്രെച്ച്ഡ് ലിങ്ക് ഇവിടെ പ്രവർത്തിക്കില്ല, കാരണം position: relative
ലിങ്കിലേക്ക് ചേർത്തിരിക്കുന്നു
ഈ നീട്ടിയ ലിങ്ക് -ടാഗിൽ മാത്രമേ വ്യാപിക്കുകയുള്ളൂ p
, കാരണം അതിൽ ഒരു രൂപമാറ്റം പ്രയോഗിക്കപ്പെടുന്നു.
<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>