Bootstrap 3 CSS obraz podpis nakładka

Question

używam bootstrap i problem nakładka napis na obrazku, div podpis po prostu nie może mieścić się w polu, jak pokazano poniżej:

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> 

CSS:

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

ROZWIĄZANIE:

Dzięki @himanshu aby rozwiązać ten problem.

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

myślę Problem polega na umieszczeniu a następnie nakładki, div.desc jest absolutna i obraz jest jego brat. Tak więc nakładka nie będzie podążać za obrazem, będzie tylko tagiem kotwicy lub twoim div.wrapper.

Z tego co widzę, jest margines na obrazie lub padding w kotwicy lub opakowaniu.

Najlepszym rozwiązaniem jest umieszczenie desc i obrazu w innym div o szerokości 100% z dopełnieniem 0.

<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> 

CSS:

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

Answer 2

Użyj tego atrybuty klasy 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

Spróbuj

<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> 

css

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

dla innych próbujących nakładki podpis na obrazie w Bootstrap, należy rozważyć użycie podpisy karuzela .

Zobacz tutaj: 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>