CYCLE2 gleitet in twitter-Bootstrap-Gitter

Question

Ich habe einige Gitter wie

row 4 | 4| 4 
row 8 | 4 

, als ich in der ersten Reihe auf die erste und zweite Gitter jeweils ein Zyklus2 Schieber als auf Sekunden Reihen zweite Gitter wieder ein Zyklus2 Es ist eine Art von Spielen mit Symmetrie

Meine Problembilder haben sie unterschiedliche Auflösung und die Höhe sollte auf das höchste Raster erweitern. So sollte zum Beispiel in meiner ersten Zeile die Höhe von cycle2-Bildern gleich sein.

hier habe ich einen jsfiddler Mockup
https://jsfiddle.net/lgtsfiddler/72ycx3m6/19/

Wie in diesem Fall vorgehen?

Answer 1

Sehr schwierig, Ihrer Frage zu folgen, aber wenn ich Sie richtig verstehe, möchten Sie eine Reihe von Spalten als die gleiche Höhe wie die höchste Spalte Höhe festlegen. Sie haben keinen Code gepostet oder uns gesagt, mit welchem ​​Framework Sie arbeiten (vielleicht Bootstrap, weil das Tag?), Also ist es sehr schwierig, eine genaue Antwort zu geben.

Verwenden Sie jQuery, um die Höhe jeder Spalte zu erhalten, die Sie vergleichen möchten. Speichern Sie die Höhen in einem Array, vergleichen Sie die Höhen, um die höchste zu finden, und legen Sie die Höhe aller Spalten auf diese Höhe fest. Sie werden zwar Leerzeichen in Ihrem Design haben, aber so wird es gemacht.

Answer 2

Suchen Sie für die Ausgabe wie folgt aus:

https://jsfiddle.net/72ycx3m6/24/

Hier habe ich hinzugefügt, um eine equalheight Klasse zu jedem row div und fügte auch JS Funktion wie:

$(document).ready(function(){ 
    var maxHeight = 0; 
    $(".img-responsive").each(function(){ 
     var currentHeight = $(this).height(); 
     if (currentHeight > maxHeight) 
      maxHeight = currentHeight; 
    }); 

    $("div.equalheight").height(maxHeight); 
}); 

Answer 3

ich nicht bin sicher, wenn ich Ihr Problem richtig verstanden habe, aber wenn Sie nach einer Lösung suchen, um Spalten horizontal in einer Reihe auszurichten, oder um die Höhe von Spalten innerhalb einer Reihe zu normalisieren, dann sollten Sie sich diesen tollen Blick ansehen jQuery-Skript:

http://brm.io/jquery-match-height/

Wir verwenden es in einem Dutzend Projekten, wenn sie horizontal versucht, eine unbekannte Anzahl von „div.col- *“ align unbekannter Höhe in einem „div.row“. horizontal - Unser gemeinsames Konzept sieht somethin wie diese

<div class="row normalizeMe"> 
    <div class="col-sm-6 col-md-4">unknown height...</div> 
    <div class="col-sm-6 col-md-4">unknown height...</div> 
    <div class="col-sm-4">unknown height...</div> 
    <div class="col-sm-4">unknown height...</div> 
    <div class="col-sm-4">unknown height...</div> 
    <div class="col-sm-4">unknown height...</div> 
</div> 
<script> 
    $('.row.normalizeMe > div[class*="col-"]').matchHeight(); 
</script> 

Egal, welche Bildschirmgröße oder wie groß die Boxen sind, wird das Skript immer schön Ihre COL- auszurichten. Es sollte auch funktionieren, um die Höhe des Containers Ihrer Folien zu normalisieren.