Mam następujący przykład: http://jsfiddle.net/Q5dXc/show/Czułe miniatury usługi Bootstrap: jak leczyć wcięcia w drugim rzędzie?
Jakiś pomysł, w jaki sposób mogę wyleczyć wcięcia po czwartej miniaturze?
Oto źródło: http://jsfiddle.net/Q5dXc/
Patrząc na documentation pod nagłówkiem „Więcej przykładów”, widzę ich przykładem 2 wierszy, ale nie mogę tego dokonać.
Wszelkie pomysły? Z góry dziękuję.
Nie wyjaśniają tego dobrze w wersji demonstracyjnej, ale jeśli używasz do tego celu <div class="row-fluid">, musisz utworzyć kolejny wiersz dla następnej linii miniaturek. Jeśli chcesz zrobić tylko kilka miniaturek, które nie są fluid, możesz po prostu użyć zwykłego <div> lub <p>. To powinno być podniesione jako problem przeciwko Bootstrap, aby można go było naprawić.
Znalazłem ten sam problem i nie znalazłem eleganckiego rozwiązania. Używam tego małego Hack:
.thumbnails .span4:nth-child(3n+1),
.thumbnails .span4:first-child + li + li + li,
.thumbnails .span4:first-child + li + li + li + li + li + li {
margin-left: 0;
}
Należy zauważyć, że długa seria li są sposobem IE, a trzeba dodać jeden z nich dla każdego wiersza.
To jest zgłoszony problem na oficjalnym bootstrapie github, więc sugeruję każdemu, kto szuka więcej rozwiązań, aby to sprawdzić - twitter bootstrap on github.com.
Od tego momentu problem nie został rozwiązany, ale różni użytkownicy przesłali ponad 10 różnych rozwiązań w wątku komentarza.
documentation for thumbnails nie nawiązują do elastycznego projektowania ale predefiniowanym row z .span* dzieci:
...the thumbnails component uses existing grid system classes - like .span2 or .span3 - for control of thumbnail dimensions.
mieć chldren z .span2, .span3, .span4 lub .span6 następujące patch współpracuje z nowoczesnymi przeglądarkami i Twitter Bootstrap 2.3.2:
.row-fluid .thumbnails .span2:nth-child(6n+1),
.row-fluid .thumbnails .span3:nth-child(4n+1),
.row-fluid .thumbnails .span4:nth-child(3n+1),
.row-fluid .thumbnails .span6:nth-child(2n+1) {
margin-left: 0;
}