2017-03-24 19 views
5

में कार्ड-आईएमजी-ओवरले के साथ लिंक कैसे बनाएं, मुझे एक समस्या है जहां किसी छवि पर टेक्स्ट प्रदर्शित करने के लिए कार्ड-आईएमजी-ओवरले का उपयोग कर कोई भी बूटस्ट्रैप v4 कार्ड उस छवि के नीचे दिए गए लिंक को काम करने से रोकता है।बूटस्ट्रैप v4

<div class="card" style="border-color: #333;"> 
    <img class="card-img-top" src="..." alt="Title image"/> 
    <div class="card-inverse"> 
     <h1 class="text-stroke">Title</h1> 
    </div> 
    <div class="card-block"> 
     <a href="#" class="card-link">Card link</a> 
     <p class="card-text">Article Text</p> 
    </div> 
    <div class="card-footer"> 
     <small class="text-muted">Date - Author</small> 
    </div> 
    </div> 

ये लिंक काम नहीं करते:

ये लिंक काम करने

<div class="card" style="border-color: #333;"> 
    <img class="card-img-top" src="..." alt="Title image"/> 
    <div class="card-img-overlay card-inverse"> 
     <h1 class="text-stroke">Title</h1> 
    </div> 
    <div class="card-block"> 
     <a href="#" class="card-link">Card link</a> 
     <p class="card-text">Article Text</p> 
    </div> 
    <div class="card-footer"> 
     <small class="text-muted">Date - Author</small> 
    </div> 
    </div> 

मैं देख रहा हूँ बूटस्ट्रैप v4 के लिए इस बारे में एक खुला मुद्दा नहीं है, लेकिन किसी को भी एक समाधान के साथ मदद कर सकते हैं एक ही देखो को संरक्षित करेगा?

+0

आप 'स्थिति जोड़ सकते हैं: करने के लिए' .card-link' –

+0

क्यों आप लिंक हालांकि ओवरले के नीचे क्लिक करने योग्य होना चाहेगा relative'? यदि आप लिंक को क्लिक करने योग्य बनाना चाहते हैं, तो उन्हें ओवरले में क्यों न रखें? –

+0

बिल्कुल सही, यह करता है। मेरे सीएसएस कौशल में स्पष्ट रूप से कमी है या मैंने देखा होगा कि इस के लिए जिथब मुद्दे खोला गया है। – AuxProc

उत्तर

4

ओवरले position: absolute जो उस तत्व एक z-index, और कार्ड में की शेष सामग्री देता है स्थिर position एड है, इसलिए यह से कोई भी एक z-index है। आप गैर-स्थैतिक position जोड़कर z-index लिंक दे सकते हैं, और चूंकि आपका कार्ड लिंक HTML में ओवरले के बाद आता है, इसलिए स्टैकिंग ऑर्डर ओवरले के शीर्ष पर कार्ड लिंक के स्टैकिंग ऑर्डर को रखेगा।

.card-link { 
    position: relative; 
} 
0

जैसा कि माइकल कोकर ने उल्लेख किया है, नीचे दिए गए आपके सीएसएस में इस मुद्दे को हल करता है।

.card-link { 
    position: relative; 
}