Bootstrap-Responsive Produkt-Grid

Ich bin ein Produkt zu erstellen raster basiert auf AngularJS Daten - wo gibt es Bilder und Produkt-details (text)

Den text manchmal erstreckt sich auf die 2. Zeile, Verwüstung.

Hier ist mein code:

<div class="row">
    <div data-ng-repeat="s in Results">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
                <div>
                    <img ng-src="{{s.ProductImage}}" class="img-responsive">
                </div>
                <div>
                    {{s.Store}} {{s.Category}} {{s.ProductName}}
                </div>
            </a>
        </div>
        <div class="clearfix visible-xs-block"></div>
    </div>
</div>

Dies ist, wie es aussieht:

Bootstrap-Responsive Produkt-Grid

Wie kann ich es beheben, so dass <div>s alle die gleiche Höhe haben?
Ich habe versucht, zu schauen online nach Lösungen, aber ich denke, ich bin mit 50%. Bitte helfen Sie.

Hinweis: ich möchte nicht das ausblenden von Inhalten.

  • Ich denke die einzige Möglichkeit ist, erstellen Sie drei, die Spalten (col-xs-4) ein tun, eine Wiederholung in jedem und split aus jedem Element in der entsprechenden Spalte basieren auf der Anzahl. Ich weiß nicht, wie zu tun, dass in eckige, so dass ich nur von Ihnen positiv bewertet werden die Frage. Ich habe dieses problem mehrere Male in meine Sprache der Wahl.
  • Meine Lösung trifft nicht die Höhen, die gleich sind, würden Sie brauchen jquery für, die. Würden Sie eine Schleife durch alle Elemente, nachdem Sie geladen wurden, und setzen Sie die minimum-Höhe auf den gleichen Wert wie das größte Produkt div
Schreibe einen Kommentar