12

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>
4

2 に答える 2

21

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

于 2012-08-03T16:27:54.067 に答える
4

追加のcssはありません。必要に応じて a/span タグを div に変更します

<a href="..." class="thumbnail clearfix">
  <img src="..." class="pull-left">
    <span class="caption pull-right">
    Lorem ipsum
   </span>
  </a>
于 2015-09-17T10:29:32.413 に答える