Html 如何在引导程序缩略图上叠加？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12443857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make an overlay over a bootstrap thumbnail?
提问by hadees
I'm using twitter bootstrap 2.1.1with a responsive layout and I'd like to float a label in the bottom right hand corner of the image. One of the problems i'm having is because it's responsive when the thumbnail is wider then the image it floats too far. The other issue is I can't seem to get it to float to the right. I should also add that although I want it in the right hand bottom corner I do want it offset by a few pixels to it isn't right on the edge of the image. Also the text might always be photo missing, that is just when a default image is shown.
我正在使用具有响应式布局的twitter bootstrap 2.1.1，我想在图像的右下角浮动一个标签。我遇到的问题之一是因为当缩略图比它浮动的图像更宽时它会响应。另一个问题是我似乎无法让它向右浮动。我还应该补充一点，虽然我希望它在右下角，但我确实希望它偏移几个像素，使其不在图像的边缘。此外，文本可能总是缺少照片，这只是在显示默认图像时。
Here is my html so far
到目前为止，这是我的 html
<li class="span4">
<div class="photo-group thumbnail">
<a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper">
<img alt="300x200&text=photo" src="http://www.placehold.it/300x200&text=Photo">
<span class="label label-inverse photo-label">Photo Missing</span>
</a>
<div class="caption">
<div class="pull-right">
by <a href="/users/50494983aa113ebd5c000001">
hadees
</a>
</div>
<a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a>
</div>
</div>
</li>
and here is my css
这是我的 css
.content-header {
padding-bottom: 10px;
}
.thumbnail > a > img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.photo-group .photo-wrapper {
position: relative;
}
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 0;
}
.photo-group .photo-wrapper .photo-label {
float: right;
}?
I've also got a jsfiddlefor a better example.
我还有一个jsfiddle一个更好的例子。
Maybe the right way to handle this is to just make the photogroup's max width 300 but I think that kind of looks funny on a desktop full screen.
也许处理这个问题的正确方法是让照片组的最大宽度为 300，但我认为这种在桌面全屏上看起来很有趣。
回答by Stephen Wood
Here's my version of the fiddle: http://jsfiddle.net/AdVCT/9/
这是我的小提琴版本：http: //jsfiddle.net/AdVCT/9/
Essentially, you need to put a wrapper around both the image and the label, so that you can absolutely position the label within this wrapper:
本质上，您需要在图像和标签周围放置一个包装器，以便您可以将标签绝对放置在此包装器中：
<div class="photo">
<img alt="..." src="..." />
<span class="label label-inverse photo-label">Photo Missing</span>
</div>
And then with some CSS, you can alter the .photo to be centered but also only as large as the image inside it (the caption is absolutely positioned, so it is effectively taken out of the page flow and doesn't affect width of parents etc.):
然后使用一些 CSS，您可以将 .photo 更改为居中，但也可以更改为与其中的图像一样大（标题是绝对定位的，因此它可以有效地从页面流中取出并且不会影响父级的宽度等等。）：
.photo-group .photo-wrapper .photo {
position: relative;
margin: 0 auto;
display: table;
}
And remove margin-left: auto/margin-right: auto from the .thumbnail > a > img rule. Finally, to offset the label slightly from the sides of the image, use:
并从 .thumbnail > a > img 规则中删除 margin-left: auto/margin-right: auto 。最后，要将标签从图像的两侧稍微偏移，请使用：
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 5px;
right: 5px;
}
And set 5px to whatever you want the offsets to be.
并将 5px 设置为您想要的偏移量。
