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>

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