我想列出一些图像,并为每个图像我想有一个标题,有一些细节,让我们说标题,现在的问题是,宽度的标题是相对于父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;
}
谢谢,感激不尽! – Uffo