CSS 右侧的 Twitter Bootstrap 缩略图标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11798545/
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
Twitter Bootstrap thumbnail caption to the right
提问by Rutger Karlsson
How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
如何将 Twitter Bootstrap 缩略图的标题放置在图像的右侧而不是下方？最好在 CSS 中。到目前为止，我只是使用现有的标签，因为我的 css 知识非常有限。
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
</ul>
回答by merv
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
稍微修改一下您的 HTML，并添加一个新类 ( right-caption)，一些 CSS 规则应该可以涵盖您。
HTML
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
Note:I'm taking the <img>out of the <div>you originally wrapped it in.
注意：我正在<img>从<div>你最初包裹它的地方取出它。
CSS
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
?
Note:The margin and padding are just stylistic; floating is the key.
注意：边距和填充只是风格；浮动是关键。
JSFiddle
JSFiddle
回答by ymakux
No additional css. Change a/span tags to div if needed
没有额外的css。如果需要，将 a/span 标签更改为 div
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>
