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:
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)
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Angenommen, die Breite wird sich nicht ändern der LI Elternteil mit :nth-child(4n) funktionieren sollte, um das Ziel
x
element.Sehen die spec für details, wie Sie Formeln schreiben für :nth-child().
Sehr sehr basic Fiddle die Anzeige funktioniert.
Update
Arbeit mit IE8 einfach jQuery verwenden (vorausgesetzt, Sie verwenden es)
Ich glaube, dass sollte den trick tun.
eigentlich bin ich mit angularJS, ohne JQ ... aber trotzdem danke 🙂
Script funktioniert. Ich hatte css-hack Formel für die gleiche, aber es hat nicht funktioniert im IE7,8 und safari.
InformationsquelleAutor Jamie Hutber
Ich hatte einen Fall, wo der Rand war ok, aber es musste sein, konsistent auf allen Zeilen.
Könnten Sie erreichen dies, indem Sie in eine leere
<li style="display:none"></li>
an den Anfang der Liste. So Bootstrap-Ziele den Rand entfernen, auf ein<li>
, dass nicht gezeigt.Mit einer Marge möglicherweise nicht akzeptabel, aber ich denke, das ist eine elegante Lösung, ohne die Notwendigkeit für das mischen Stil in js.
InformationsquelleAutor Dan
Hatte dasselbe Problem, nicht sauber, aber eine schnelle Abhilfe war die folgende:
InformationsquelleAutor Daten