Twitter Bootstrap thumbnail caption rechts

Wie man die Beschriftung eines Twitter-Bootstrap-Miniaturansichten werden auf der rechten Seite des Bildes statt unten? Vorzugsweise in CSS. Bisher bin ich nur mit vorhandenen tags als mein css-wissen ist sehr begrenzt.

<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>
Hinweis: Setzen Sie ein span4 <div> in einem span2 <li> === :/

InformationsquelleAutor Rutger Karlsson | 2012-08-03

  1. 21

    Mit eine leichte Modifikation der HTML-und der Hinzufügung einer neuen Klasse (right-caption), ein paar CSS-Regeln sollten Sie bedecken.

    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>

    Hinweis: nehme ich die <img> aus der <div> Sie ursprünglich wickelte es in.

    CSS

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

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

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

    Hinweis: Die margin und padding sind nur stilistische; floating ist der Schlüssel.

    JSFiddle

    Funktioniert wie ein Charme. Vielen Dank, Kumpel!
    wow, danke, Mann!
    nice one, aber wenn ich versuchen, erhöhen Sie den Inhalt der Beschriftung, wenn die Bildunterschrift ist mehr als die Höhe des Bildes, die Beschriftung kommt auf die neue Zeile wie in diesem fiddle jsfiddle.net/shmdhussain/y4XRR/191
    Ähm...das ist zu schlecht Aussehen oder so. Wenn Sie noch wollen, dass es richtig ausgerichtet ist, könnte man hinzufügen bottom-margin zu den <image> um sicherzustellen, dass es immer übertrifft die Höhe des div.caption. Oder man könnte hinzufügen float:right zu den .caption, so lang wie die Breite der Inhalt in das div nicht über dem Rest in den block. Persönlich, es sind Fälle wie diese, würde ich push-back gegen die content-Redaktion und behaupten, dass Beschriftungen mehr als eine bestimmte Anzahl von Zeichen gegen den Sinn des Bildunterschrift. 😉

    InformationsquelleAutor merv

  2. 4

    Kein zusätzliches css. Ändern Sie a/span div-tags, um, wenn nötig

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

    InformationsquelleAutor ymakux

Schreibe einen Kommentar