बूटस्ट्रैप 3 सीएसएस छवि कैप्शन ओवरले

Question

मैं बूटस्ट्रैप का उपयोग करें और किसी चित्र पर शीर्षक ओवरले करने के लिए एक समस्या आ, शीर्षक div सिर्फ बॉक्स के भीतर फिट नहीं कर सकते, जिन्हें आप नीचे:

HTML:

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/cake.png" class="img-responsive" alt=""> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

सीएसएस:

div.desc{ 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

समाधान: समस्या हल हो जाती को

धन्यवाद @himanshu करने के लिए।

div.desc{ 
    background-color: #000; 
    bottom: 0; 
    color: #fff; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    width: 100%; 
} 

.fix{ 
    width: 100%; 
    padding: 0px; 
} 

Answer 1

के लिए जिम्मेदार बताते हैं मुझे लगता है कि समस्या नियुक्ति में ओवरले है बल्कि उसके बाद, div.desc निरपेक्ष है और छवि अपने भाई है। तो ओवरले छवि का पालन नहीं करेगा यह केवल एंकर टैग या आपके div.wrapper का पालन करेगा।

जो मैं देख सकता हूं उससे यह है कि एंकर या रैपर में छवि या पैडिंग पर मार्जिन है।

सबसे अच्छा समाधान desc डालने औरमें 0 पैडिंग के साथ 100% चौड़ाई के साथ सबसे अच्छा समाधान है।

<div class="col-sm-4 wrapper"> 
    <a href="#"> 
<div class="fix"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div></div> 
    </a> 
</div> 

सीएसएस:

.fix{width:100%; padding:0px;} 

Answer 2

उपयोग इस div.desc वर्ग

div.desc{ 
    position: absolute; 
    bottom: 0; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    left:0; /** new **/ 
    right:0; /** new **/ 
    filter: alpha(opacity=50); 
} 

Answer 3

इस

<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 
<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 

सीएसएस

div.desc_content { 
background-color: #000; 
color: #FFF; 
font: bold 11px verdana; 
padding-left: 10px; 
padding-top: 7px; 
height: 23px; opacity: 0.7; 
position: relative; 
top: -30px; 
} 
div.wrapper{ 
    float: left; 
    position: relative; 
    margin: 10px; 
} 

Answer 4

बूटस्ट्रैप में एक छवि पर एक शीर्षक उपरिशायी की कोशिश कर दूसरों के लिए प्रयास करें, हिंडोला कैप्शन उपयोग करने पर विचार ।

यहाँ देखें: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

<div class="carousel-caption"> 
    <h3>Chania</h3> 
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
    </div>