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:
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 Produktdiv
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist, was ich am Ende tun, für die jeder, der auf stolpert auf diese in der Zukunft wieder.
Javascript
Ohne AngularJS
Für diejenigen, die nicht mit AngularJS, rufen Sie einfach
ResizeToLargestElement()
bei änderungen der Daten oder des Fensters mitMit AngularJS
Die Idee ist, rufen Sie die
ResizeToLargestElement()
- Funktion wenn$scope.Results
ändert oder wenn das Fenster ändert.Wissen, Wann
$scope.Results
geändert haben, ist einfach, aber zu wissen, Wann Elemente (gebunden sind) fertige rendering ist nicht einfach. Um das zu tun, müssen Sie eine AngularJS-Direktive.Wissen, wenn das Fenster re-Größe, verwenden Sie
angular.element($window).on('resize', function () {...});
HTML
MyDirectives.js
mycontroller.js
Hinweis: dies erfordert, dass Sie gehören
$window
im AngularJS dependency-Liste.I. E.
angular.module('myApp').controller('....', ['...., '$window', ....]);
Wenn Sie möchten, um die Höhe jedes Produkt dynamisch, Sie müssen teilen Sie die Ergebnisse in die Spalten. Und dann verwenden
ng-if
um die richtigen Elemente in der rechten Spalte. Jeden 3. Punkt gehen in der gleichen Spalte. Setzen Sie auf verschiedene Spalten reduzieren einfach die$index
durch1
für jede weitere Spalte.Können Sie manuell einschränken, die Höhe des
div
und verwenden Sie einoverflow
. Verwenden Sie so etwas wieOder, Sie können immer mit einem responsive Tabelle (
<table class="table table-responsive">
) für Ihr layout.div
mit der maximalen Höhe und alle Höhen zu. Oder verwenden Sie einen Tabellen-layout.div
wird sich nicht ändern, auf browser-Größe, richtig?$( window ).resize(function() {...}
lassen Sie mich versuchen.Die beste Lösung für dieses problem ist das hinzufügen clearfix-Klasse hidden divs für uche Größe des Viewports. zum Beispiel:
Große Größe:, ich will 6 Spalten (large desktops)
Mittlere Größe: ich möchte 4 Spalten (Desktops)
Tabletten: ich möchte 3 Spalten
Handys: ich will 2 Spalten
so, ich habe die Liste der Produkte: