ताणलेली लिंक
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="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>
ताणलेल्या दुव्यासह स्तंभ
या इतर सानुकूल घटकासाठी प्लेसहोल्डर सामग्रीचे आणखी एक उदाहरण. काही वास्तविक-जगातील सामग्री कशी दिसेल याची नक्कल करण्याचा हेतू आहे आणि आम्ही घटकाला थोडासा भाग आणि आकार देण्यासाठी येथे वापरत आहोत.
कुठेतरी जा<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
- A
transform
किंवाperspective
पेक्षा इतर मूल्यnone
- चे
will-change
मूल्यtransform
किंवाperspective
filter
पेक्षा वेगळे मूल्यnone
किंवाwill-change
मूल्यfilter
(फक्त Firefox वर कार्य करते )
ताणलेल्या दुव्यांसह कार्ड
कार्डच्या शीर्षकावर तयार करण्यासाठी आणि कार्डच्या सामग्रीचा मोठा भाग तयार करण्यासाठी काही द्रुत उदाहरण मजकूर.
स्ट्रेच्ड लिंक येथे काम करणार नाही, कारण 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>