Bootstrap响应产品网格

Question

我正在构建一个基于AngularJS数据构建的产品网格 - 其中将有图像和产品详细信息(文本)

该文有时会扩展到第二行,造成严重破坏.

这是我的代码:

<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>

这就是它的样子:

如何修复它以使<div>所有高度相同？我试着在网上寻找解决方案,但我认为我在那里是50%.请帮忙.

注意:我不想隐藏内容.

Answer 1

这就是我最终为将来再次偶然发现此问题的人所做的事情。

JavaScript

function ResizeToLargestElement(element) {
    var maxHeight = -1;
    if ($(element).length > 0) {
        $(element).each(function () {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });

        $(element).each(function () {
            $(this).height(maxHeight);
        });
    }
}

没有 AngularJS

对于那些不使用 AngularJS 的人，只需ResizeToLargestElement()在数据更改或窗口大小调整时调用

$(window).resize(function() {
       ResizeToLargestElement('.AutoResizeToLargestElement');
});`

使用 AngularJS

ResizeToLargestElement()这个想法是每当$scope.Results变化或窗口大小调整时调用该函数。

知道何时$scope.Results更改很容易，但要知道（与其绑定的）元素何时完成渲染并不容易。为此，您需要一个 AngularJS 指令。

要了解窗口何时重新调整大小，请使用angular.element($window).on('resize', function () {...});

超文本标记语言

<div class="row">
    <div data-ng-repeat="s in Results" data-ng-repeat-finished> <!--ADDED Directive-->
        <div class="col-xs-4">
            <a href="#" class="thumbnail AutoResizeToLargestElement"> <!--ADDED Class-->
                <div>
                    <img ng-src="{{s.ProductImage}}" class="img-responsive">
                </div>
                <div>
                    {{s.Store}} {{s.Category}} {{s.ProductName}}
                </div>
            </a>
        </div>
        <!--REMOVED clearfix-->
    </div>
</div>

我的指令.js

angular.module('myApp').directive('ngRepeatFinished', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

mycontroller.js

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    ResizeToLargestElement(".AutoResizeToLargestElement");
});

angular.element($window).on('resize', function () {   
    ResizeToLargestElement(".AutoResizeToLargestElement");
});

注意：这需要您将其包含$window在 AngularJS 依赖项列表中。IEangular.module('myApp').controller('....', ['...., '$window', ....]);