Lücken in gestapelten Bootstrap-Zeilen: Lösungen
In Bootstrap-basierten Rastern kommt es häufig zu Problemen mit Lücken, wenn Kacheln unterschiedlicher Höhe gestapelt werden . Um dieses Problem anzugehen, sollten Sie die folgenden Ansätze in Betracht ziehen:
1. Elementhöhen festlegen:
Weisen Sie allen Elementen im Portfolio eine feste Höhe zu, um eine konsistente Ausrichtung sicherzustellen.
2. Mauerwerkslayout:
Verwenden Sie ein Tool wie Mauerwerk, um die Elementhöhen automatisch anzupassen und an den verfügbaren Raum anzupassen.
3. Responsives Spalten-Reset:
Bootstrap bietet „responsives Spalten-Reset“. Durch die Anwendung dieser Klassen auf Ihr Raster können Sie Spaltenhöhen dynamisch festlegen und Lücken vermeiden.
4. Clearfix mit Medienabfragen:
Fügen Sie nach jedem Element ein Div mit einem Mini-Clearfix hinzu. Dies kann mithilfe von Medienabfragen ausgeblendet werden, wodurch das Lückenproblem effektiv behoben wird.
Codebeispiel:
<div class="row portfolio">
<div class="col-lg-2 col-sm-3 col-xs-4">
<div class="panel panel-default">
... (Element content)
</div>
</div>
<div class="clear"></div> <!-- Added after each element -->
... (Additional elements)
</div>@media (max-width: 767px) {
.portfolio > .clear:nth-child(6n)::before {
/* Clearfix for mobile devices */
}
}jQuery-Ansatz:
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); // Set element heights uniformly
});
});Das obige ist der detaillierte Inhalt vonWie eliminiere ich Lücken in gestapelten Bootstrap-Zeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
