in English

നീട്ടിയ ലിങ്ക്

CSS വഴി ഒരു നെസ്റ്റഡ് ലിങ്ക് "വലിച്ചുനീട്ടുക" വഴി ഏതെങ്കിലും HTML ഘടകമോ ബൂട്ട്സ്ട്രാപ്പ് ഘടകമോ ക്ലിക്ക് ചെയ്യാവുന്നതാക്കുക.

ഒരു സ്യൂഡോ എലമെന്റ് വഴി അതിൽ അടങ്ങിയിരിക്കുന്ന ബ്ലോക്ക് ക്ലിക്കുചെയ്യാൻ .stretched-linkഒരു ലിങ്കിലേക്ക് ചേർക്കുക . മിക്ക കേസുകളിലും, ക്ലാസുമായി ഒരു ലിങ്ക് അടങ്ങിയിരിക്കുന്ന ഒരു ഘടകം ക്ലിക്ക് ചെയ്യാവുന്നതാണെന്നാണ് ഇതിനർത്ഥം . CSS എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക , മിക്ക പട്ടിക ഘടകങ്ങളുമായി മിക്സ് ചെയ്യാൻ കഴിയില്ല.::afterposition: relative;.stretched-linkposition.stretched-link

കാർഡുകൾക്ക് position: relativeസ്ഥിരസ്ഥിതിയായി ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഉണ്ട്, അതിനാൽ ഈ സാഹചര്യത്തിൽ നിങ്ങൾക്ക് .stretched-linkമറ്റ് HTML മാറ്റങ്ങളൊന്നും കൂടാതെ കാർഡിലെ ഒരു ലിങ്കിലേക്ക് ക്ലാസ് സുരക്ഷിതമായി ചേർക്കാൻ കഴിയും.

സ്ട്രെച്ചഡ് ലിങ്കുകൾക്കൊപ്പം ഒന്നിലധികം ലിങ്കുകളും ടാപ്പ് ടാർഗെറ്റുകളും ശുപാർശ ചെയ്യുന്നില്ല. എന്നിരുന്നാലും, ഇത് ആവശ്യമെങ്കിൽ ചില ശൈലികളും സഹായിക്കും position.z-index

നീട്ടിയ ലിങ്കുള്ള കാർഡ്

കാർഡ് ശീർഷകത്തിൽ നിർമ്മിക്കാനും കാർഡിന്റെ ഉള്ളടക്കത്തിന്റെ ഭൂരിഭാഗവും ഉണ്ടാക്കാനുമുള്ള ചില ദ്രുത ഉദാഹരണ വാചകം.

എവിടെയെങ്കിലും പോകൂ

html

<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

വലിച്ചുനീട്ടിയ ലിങ്കുള്ള ഇഷ്‌ടാനുസൃത ഘടകം

ഇഷ്‌ടാനുസൃത ഘടകത്തിനായുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. ചില യഥാർത്ഥ ഉള്ളടക്കം എങ്ങനെയായിരിക്കുമെന്ന് അനുകരിക്കാനാണ് ഇത് ഉദ്ദേശിക്കുന്നത്, ഘടകത്തിന് അൽപ്പം ശരീരവും വലുപ്പവും നൽകാൻ ഞങ്ങൾ ഇത് ഇവിടെ ഉപയോഗിക്കുന്നു.

എവിടെയെങ്കിലും പോകൂ

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>

നീട്ടിയ ലിങ്കുള്ള നിരകൾ

ഈ മറ്റ് ഇഷ്‌ടാനുസൃത ഘടകത്തിനായുള്ള പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കത്തിന്റെ മറ്റൊരു ഉദാഹരണം. ചില യഥാർത്ഥ ഉള്ളടക്കം എങ്ങനെയായിരിക്കുമെന്ന് അനുകരിക്കാനാണ് ഇത് ഉദ്ദേശിക്കുന്നത്, ഘടകത്തിന് അൽപ്പം ശരീരവും വലുപ്പവും നൽകാൻ ഞങ്ങൾ ഇത് ഇവിടെ ഉപയോഗിക്കുന്നു.

എവിടെയെങ്കിലും പോകൂ

html

<div class="row g-0 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 p-4 ps-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, കാരണം അതിൽ ഒരു രൂപമാറ്റം പ്രയോഗിക്കപ്പെടുന്നു.

html

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