Bootstrap對齊標題相對於圖像寬度不是容器

我想列出一些圖像，併爲每個圖像我想有一個標題，有一些細節，讓我們說標題，現在的問題是，寬度的標題是相對於父div這是正常的，但我希望它是相對於圖像寬度，但因爲我有類img img-responsive img我不知道如何實現這一點。也許你們可以幫助我。Bootstrap對齊標題相對於圖像寬度不是容器

這是一個活生生的例子：http://jsbin.com/cudugize/1/edit?html,css,output

下面是代碼

HTML

<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3"> 
    <div class="thumbnail"> 
    <a href="url"><img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."></a> 
    <div class="caption img-responsive"> 
    <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a></h4> 
    <p class="text-center"><a href="#" class="homepage city text-uppercase"><span class="glyphicon glyphicon-globe"></span> usa</a></p> 
    </div> 
    </div> 

    <div class="thumbnail"> 
    <a href="url"><img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."></a> 
    <div class="caption img-responsive"> 
    <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a></h4> 
    <p class="text-center"><a href="#" class="homepage city text-uppercase"><span class="glyphicon glyphicon-globe"></span> usa</a></p> 
    </div> 
    </div> 

    </div>

CSS

Aditional bootstrap core css 

.thumbnail{ 
position: relative; 
width: 100%; 
border: none !important; 
} 
.thumbnail .caption{ 
    position: absolute; 
bottom: 0px; 
background: rgba(0,0,0,0.50); 
width: 100%; 
padding: 0px !important; 
}

來源

2014-04-18 Uffo

http://jsbin.com/cudugize/7

請參閱我的演示代碼，它歸檔你的需求。

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    .tc { 
     text-align:center; 
    } 
    .thumbnail { 
     position: relative; 
     display:inline-block; 
     *display:inline; 
     *zoom:1; 
     border: none; 
     margin:0 auto; 
     padding:0; 
    } 
    .thumbnail .caption { 
     position: absolute; 
     bottom: 0px; 
     background: rgba(0, 0, 0, 0.50); 
     width: 100%; 
     padding: 0px !important; 
    } 
    </style> 
</head> 

<body> 
    <div class="col-sm-3 col-xs-6 col-md-2 col-lg-3"> 

     <div class="tc"> 
      <div class="thumbnail"> 
       <a href="url"> 
        <img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."> 
       </a> 
       <div class="caption img-responsive"> 
        <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a> 
        </h4> 
        <p class="text-center"> 
         <a href="#" class="homepage city text-uppercase"> 
          <span class="glyphicon glyphicon-globe"></span>usa</a> 
        </p> 
       </div> 
      </div> 
     </div> 

     <div class="tc"> 
      <div class="thumbnail"> 
       <a href="url"> 
        <img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."> 
       </a> 
       <div class="caption img-responsive"> 
        <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a> 
        </h4> 
        <p class="text-center"> 
         <a href="#" class="homepage city text-uppercase"> 
          <span class="glyphicon glyphicon-globe"></span>usa</a> 
        </p> 
       </div> 
      </div> 
     </div> 

    </div> 
</body> 

</html>

來源

2014-04-18 12:41:01 aisin

謝謝，感激不盡！ – Uffo

這個CS S的關係做的伎倆：

.thumbnail { 
    display: inline-block; 
    position: relative; 
    border: none !important; 
    padding: 0; 
} 
.thumbnail .caption{ 
    position: absolute; 
    bottom: 0px; 
    background: rgba(0,0,0,0.50); 
    width: 100%; 
    padding: 0px !important; 
}

來源

2014-04-18 12:27:41

Bootstrap對齊標題相對於圖像寬度不是容器

回答

相關問題