BEARBEITE Der Inhalt der Preistabellen wird dynamisch generiert. Ich kann die Höhe nicht vorhersagen. Ich verwende einfach das 400px case für das Diagramm. Ich kann also nicht für jede Spalte eine statische Höhe festlegen.

Ich habe 8 Preistabellen Sie sind alleähnlic Höhen nahe 400px, mit dem größtes (rotes Quadrat) 430px und die kleinste in einer Höhe von 390px.

Responsive Klasse für Spalten:class="col-lg-3 col-md-4 col-sm-6"

HTML-Layout:

<div class="row">
    <% columns.each do |column| %>
        <div class="col-lg-3 col-md-4 col-sm-6">
            CONTENT
        </div>
    <% end %>   
</div>

Wie verhindere ich, dass Spalten in @ verschoben werde "Neue Zeile", d. h. alle Spalten sind in demselben @ enthaltdiv.row tag, damit sie reagieren können. In der zweiten Gruppe von Spalten werden jedoch die ersten beiden "Slots" übersprungen, die dritte Zeile (nicht gezeigt) beginnt jedoch wie gewohnt.

WICHTIG, DASS SIE ALLE IM GLEICHEN SIND.row OBJEK Damit der reaktionsschnelle Aspekt funktioniert und Spalten zusammenbrechen.

Diagramm des Problems:

Was ich will, ist ungefähr so: