Twitter Bootstrap缩略图标题置于右侧

Question

如何使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>

- Rutger Karlsson

---

注意：在span2的<li>中放置一个span4的<div> === :/ - merv

Answer 1

通过稍微修改你的 HTML，以及添加一个新类 (right-caption)，几条 CSS 规则应该就可以搞定了。

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>

注意: 我将<img>从你最初包裹它的<div>中取出。

CSS

.thumbnail.right-caption > img {
    float: left;
    margin-right: 9px;
}

.thumbnail.right-caption {
    float: left;
}

.thumbnail.right-caption > .caption {
    padding: 4px;
}
​

注意: 边距和内边距只是样式上的；浮动才是关键。

JSFiddle

- merv

---

@merv 不错，但是当我尝试增加标题的内容时，如果标题超过图像的高度，标题会换行，就像这个示例中的情况 http://jsfiddle.net/shmdhussain/y4XRR/191/ - Mohamed Hussain

@MohamedHussain 嗯...无论如何都会看起来很糟糕。如果您仍然希望将其右对齐，可以向 <image> 添加 bottom-margin 以确保它始终超过 div.caption 的高度。或者您可以向 .caption 添加 float:right，只要该 div 中的内容宽度不超过块中的剩余部分即可。就我个人而言，像这样的情况，我会反对内容编辑者，并争辩说超过一定字符数的字幕违反了 字幕 的含义。;) - merv

Answer 2

没有额外的CSS。如有必要，请将a/span标签更改为div。

<a href="..." class="thumbnail clearfix">
  <img src="..." class="pull-left">
    <span class="caption pull-right">
    Lorem ipsum
   </span>
  </a>

- ymakux