Heim > Artikel > Web-Frontend > Wie kann man Lücken in überfüllten Bootstrap-Zeilen beheben?
Problemanalyse:
Beim Entwerfen eines Bootstrap-Rastersystems für ein Portfolio Benutzer Es kann vorkommen, dass unterschiedliche Inhaltslängen Lücken im Rasterlayout verursachen. Dies tritt auf, wenn die Höhe eines Elements im Raster seinen Stapelhaltepunkt überschreitet.
Lösungserkundung:
Um diese Herausforderung zu bewältigen, ziehen Sie die folgenden Lösungen in Betracht:
Erweiterte Ansätze:
Mini Clearfix:
Anstatt nach jedem Element separate Clear-Elemente zu verwenden, sollten Sie erwägen, nach jedem Rasterelement ein zusätzliches Div hinzuzufügen und mithilfe von Medienabfragen einen Mini-Clearfix darauf anzuwenden. Dieser Ansatz vermeidet zusätzliches JavaScript und behält die Lesbarkeit des Markups bei.
<div class="row portfolio"> <div class="...">...</div> <div class="clear"></div> </div>
@media (max-width: 767px) { .portfolio>.clear:nth-child(6n)::before { content: ''; display: table; clear: both; } } ...
jQuery-Höhenanpassung:
Für einen dynamischeren Ansatz sollten Sie die Verwendung von jQuery zum Anpassen der Spalte in Betracht ziehen Höhen entsprechend der maximalen Höhe:
var row=$('.portfolio'); $.each(row, function() { var maxh=0; $.each($(this).find('div[class^="col-"]'), function() { if($(this).height() > maxh) maxh=$(this).height(); }); $.each($(this).find('div[class^="col-"]'), function() { $(this).height(maxh); }); });
Das obige ist der detaillierte Inhalt vonWie kann man Lücken in überfüllten Bootstrap-Zeilen beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!