So erstellen Sie eine Bootstrap-grid-thumbnails

Ich habe eine unbekannte Anzahl von Daumen, um anzuzeigen, hier ist ein Beispiel des HTML gerendert:

<div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

Hier ist das Ergebnis:
So erstellen Sie eine Bootstrap-grid-thumbnails

Frage : Da Baue ich die UI dynamisch, wie kann ich vermeiden, dass die Marge in der zweiten Zeile, ohne eine weitere <div class="row-fluid">

Update IE8 Lösung ist erforderlich

Wird die Anzahl der Elemente pro Zeile ändern?
könnte sich ändern, im Grunde ist es eine Zeile mit einer unbekannten Anzahl von Daumen <div class="row-fluid"><ul class="thumbnails"><li>....<li>
Ihr aber mein denken ist, vorausgesetzt, die Breite des übergeordneten Elements nicht ändern, Sie werden immer die 5. li am start?
Ja, Sie sind richtig
Dies ist der Weg hinter Ihnen, jetzt wäre ich aber nur den Speicherort ändern, an den Rand auf die andere Seite, d.h. auf der rechten anstatt der linken Seite. Macht es Sinn, zu denken, dass, wenn ein thumbnail wird auf der Seite sollte es sagen, "wer sonst kommt als Nächstes bleiben so weit Weg von mir", diese würden immer in Ordnung sein, auch wenn niemand sonst kam, anstatt zu sagen "wenn ich hierher komme, bleibe ich so weit Weg von wer ist hier" die, wie Ihre Frage zeigt, könnte nicht gelten, wenn es der erste war um. Sie würde auch konsistent Spalte-Ausrichtung, die Art und Weise (sorry, ich denke in Analogien, also die story)

InformationsquelleAutor Shlomi Schwartz | 2013-03-04

Schreibe einen Kommentar