右侧的 Twitter Bootstrap 缩略图标题答案

【问题标题】：Twitter Bootstrap thumbnail caption to the right右侧的 Twitter Bootstrap 缩略图标题
【发布时间】：2015-09-17 18:29:32
【问题描述】：

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

【问题讨论】：

注意：将 span4 <div> 放入 span2 <li> === :/

标签： css twitter-bootstrap thumbnails caption

【解决方案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 不错，但是当我尝试增加标题的内容时，当标题超过图像的高度时，标题会像这个小提琴jsfiddle.net/shmdhussain/y4XRR/191一样换行跨度>
@MohamedHussain 嗯……不管怎样，这看起来都很糟糕。如果您仍然希望它正确对齐，您可以将bottom-margin 添加到<image> 以确保它始终超过div.caption 的高度。或者您可以将float:right 添加到.caption，只要该div 中内容的宽度不超过块中的其余部分。就个人而言，在这种情况下，我会反对内容编辑，并认为字幕长度超过一定数量的字符违反了 caption 的含义。 ;)

【解决方案2】：

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

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

【讨论】：