നീട്ടിയ ലിങ്ക്
CSS വഴി ഒരു നെസ്റ്റഡ് ലിങ്ക് "വലിച്ചുനീട്ടുക" വഴി ഏതെങ്കിലും HTML ഘടകമോ ബൂട്ട്സ്ട്രാപ്പ് ഘടകമോ ക്ലിക്ക് ചെയ്യാവുന്നതാക്കുക.
ഒരു സ്യൂഡോ എലമെന്റ് വഴി അതിൽ അടങ്ങിയിരിക്കുന്ന ബ്ലോക്ക് ക്ലിക്കുചെയ്യാൻ .stretched-link
ഒരു ലിങ്കിലേക്ക് ചേർക്കുക . മിക്ക കേസുകളിലും, ക്ലാസുമായി ഒരു ലിങ്ക് അടങ്ങിയിരിക്കുന്ന ഒരു ഘടകം ക്ലിക്ക് ചെയ്യാവുന്നതാണെന്നാണ് ഇതിനർത്ഥം .::after
position: relative;
.stretched-link
കാർഡുകൾക്ക് position: relative
സ്ഥിരസ്ഥിതിയായി ബൂട്ട്സ്ട്രാപ്പിൽ ഉണ്ട്, അതിനാൽ ഈ സാഹചര്യത്തിൽ നിങ്ങൾക്ക് .stretched-link
മറ്റ് HTML മാറ്റങ്ങളൊന്നും കൂടാതെ കാർഡിലെ ഒരു ലിങ്കിലേക്ക് ക്ലാസ് സുരക്ഷിതമായി ചേർക്കാൻ കഴിയും.
സ്ട്രെച്ചഡ് ലിങ്കുകൾക്കൊപ്പം ഒന്നിലധികം ലിങ്കുകളും ടാപ്പ് ടാർഗെറ്റുകളും ശുപാർശ ചെയ്യുന്നില്ല. എന്നിരുന്നാലും, ഇത് ആവശ്യമെങ്കിൽ ചില ശൈലികളും സഹായിക്കും position
.z-index
നീട്ടിയ ലിങ്കുള്ള കാർഡ്
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
എവിടെയെങ്കിലും പോകൂമീഡിയ ഒബ്ജക്റ്റുകൾക്ക് ഡിഫോൾട്ടായി ഇല്ല , അതിനാൽ മീഡിയ ഒബ്ജക്റ്റിന് പുറത്ത് ലിങ്ക് നീട്ടുന്നത് തടയാൻ position: relative
ഞങ്ങൾ ഇവിടെ ചേർക്കേണ്ടതുണ്ട് ..position-relative
നീട്ടിയ ലിങ്കുള്ള മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
എവിടെയെങ്കിലും പോകൂകോളങ്ങൾ position: relative
ഡിഫോൾട്ടാണ്, അതിനാൽ ക്ലിക്ക് ചെയ്യാവുന്ന കോളങ്ങൾക്ക് .stretched-link
ഒരു ലിങ്കിലെ ക്ലാസ് മാത്രമേ ആവശ്യമുള്ളൂ. എന്നിരുന്നാലും, ഒരു ലിങ്ക് മൊത്തത്തിൽ നീട്ടുന്നതിന് നിരയിലും വരിയിലും .row
ആവശ്യമാണ് ..position-static
.position-relative
നീട്ടിയ ലിങ്കുള്ള നിരകൾ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്കെലറിസ്ക് ആന്റ് സോളിസിറ്റുഡിൻ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
എവിടെയെങ്കിലും പോകൂഅടങ്ങുന്ന ബ്ലോക്ക് തിരിച്ചറിയുന്നു
നീട്ടിയ ലിങ്ക് പ്രവർത്തിക്കുന്നില്ലെന്ന് തോന്നുന്നുവെങ്കിൽ, അടങ്ങുന്ന ബ്ലോക്ക് ആയിരിക്കും കാരണം. ഇനിപ്പറയുന്ന CSS പ്രോപ്പർട്ടികൾ ഒരു ഘടകത്തെ അടങ്ങുന്ന ബ്ലോക്ക് ആക്കും:
- അല്ലാതെ മറ്റൊരു
position
മൂല്യംstatic
- എ
transform
അല്ലെങ്കിൽ അല്ലാതെയുള്ളperspective
മൂല്യംnone
- ഒരു
will-change
മൂല്യംtransform
അല്ലെങ്കിൽperspective
filter
അല്ലാതെ മറ്റൊരു മൂല്യം അല്ലെങ്കിൽnone
ഒരുwill-change
മൂല്യംfilter
(ഫയർഫോക്സിൽ മാത്രം പ്രവർത്തിക്കുന്നു)
നീട്ടിയ ലിങ്കുകളുള്ള കാർഡ്
കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും നിർമ്മിക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.
സ്ട്രെച്ച്ഡ് ലിങ്ക് ഇവിടെ പ്രവർത്തിക്കില്ല, കാരണം position: relative
ലിങ്കിലേക്ക് ചേർത്തിരിക്കുന്നു
ഈ നീട്ടിയ ലിങ്ക് -ടാഗിൽ മാത്രമേ വ്യാപിക്കുകയുള്ളൂ p
, കാരണം അതിൽ ഒരു രൂപമാറ്റം പ്രയോഗിക്കപ്പെടുന്നു.