खिंचाव के कड़ी बा
कवनो भी एचटीएमएल तत्व भा बूटस्ट्रैप घटक के सीएसएस के माध्यम से नेस्टेड लिंक के “खिंचाव” करके क्लिक करे लायक बनाईं।
कवनो लिंक में जोड़ .stretched-link
के ओकर समाहित ब्लॉक::after
के छद्म तत्व के माध्यम से क्लिक करे लायक बनावल जा सकेला। ज्यादातर मामिला में एकर मतलब ई होला कि जवना तत्व में क्लास के position: relative;
साथ लिंक होखे ऊ क्लिक करे लायक होला। .stretched-link
कृपया ध्यान दीं कि CSS कइसे position
काम करे ला , .stretched-link
अधिकतर टेबल तत्व सभ के साथ मिलावल ना जा सके ला।
कार्ड सभ position: relative
में डिफ़ॉल्ट रूप से बूटस्ट्रैप में होला, एह से एह मामला में रउआँ सुरक्षित रूप .stretched-link
से कार्ड में कौनों लिंक में क्लास के बिना कौनों अउरी एचटीएमएल बदलाव कइले जोड़ सके लीं।
खिंचाव वाला लिंक के साथ कई गो लिंक आ टैप टारगेट के सलाह ना दिहल जाला। हालाँकि, कुछ 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
- क
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>