ताणलेली लिंक
CSS द्वारे नेस्टेड लिंक “स्ट्रेचिंग” करून कोणताही HTML घटक किंवा बूटस्ट्रॅप घटक क्लिक करण्यायोग्य बनवा.
स्यूडो एलिमेंटद्वारे त्यात असलेले ब्लॉक क्लिक करण्यायोग्य .stretched-link
बनवण्यासाठी लिंकमध्ये जोडा . बर्याच प्रकरणांमध्ये, याचा अर्थ असा आहे की ज्या घटकात वर्गाची लिंक असते ती क्लिक करण्यायोग्य असते.::after
position: relative;
.stretched-link
position: relative
बूटस्ट्रॅपमध्ये डिफॉल्टनुसार कार्ड्स असतात , त्यामुळे या प्रकरणात तुम्ही .stretched-link
इतर HTML बदलांशिवाय कार्डमधील लिंकवर वर्ग सुरक्षितपणे जोडू शकता.
ताणलेल्या लिंकसह एकाधिक लिंक्स आणि टॅप लक्ष्यांची शिफारस केलेली नाही. तथापि, काही position
आणि z-index
शैली हे आवश्यक असल्यास मदत करू शकतात.
ताणलेली लिंक असलेले कार्ड
कार्डच्या शीर्षकावर तयार करण्यासाठी आणि कार्डच्या सामग्रीचा मोठा भाग तयार करण्यासाठी काही द्रुत उदाहरण मजकूर.
कुठेतरी जाposition: relative
मीडिया ऑब्जेक्ट्समध्ये डीफॉल्टनुसार नसतात , त्यामुळे .position-relative
लिंकला मीडिया ऑब्जेक्टच्या बाहेर पसरण्यापासून रोखण्यासाठी आम्हाला येथे जोडण्याची आवश्यकता आहे.
ताणलेल्या दुव्यासह मीडिया
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
कुठेतरी जास्तंभ हे position: relative
डीफॉल्टनुसार असतात, त्यामुळे क्लिक करण्यायोग्य स्तंभांना फक्त .stretched-link
दुव्यावरील वर्ग आवश्यक असतो. तथापि, संपूर्ण दुवा स्तंभावर आणि पंक्तीवर ताणणे .row
आवश्यक आहे..position-static
.position-relative
ताणलेल्या दुव्यासह स्तंभ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
कुठेतरी जाअसलेले ब्लॉक ओळखणे
जर स्ट्रेच केलेला दुवा कार्य करत नसेल तर, समाविष्ट ब्लॉक कदाचित कारण असेल. खालील CSS गुणधर्म घटक असलेले ब्लॉक बनवतील:
position
पेक्षा वेगळे मूल्यstatic
- A
transform
किंवाperspective
पेक्षा इतर मूल्यnone
- चे
will-change
मूल्यtransform
किंवाperspective
filter
पेक्षा वेगळे मूल्यnone
किंवाwill-change
मूल्यfilter
(फक्त Firefox वर कार्य करते )
ताणलेल्या दुव्यांसह कार्ड
कार्डच्या शीर्षकावर तयार करण्यासाठी आणि कार्डच्या सामग्रीचा मोठा भाग तयार करण्यासाठी काही द्रुत उदाहरण मजकूर.
स्ट्रेच्ड लिंक येथे काम करणार नाही, कारण position: relative
लिंकमध्ये जोडली आहे
ही स्ट्रेच केलेली लिंक फक्त -टॅगवर पसरली जाईल p
, कारण त्यावर ट्रान्सफॉर्म लागू केला आहे.