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

想法是每当 $scope.Results 更改或窗口调整大小时调用 ResizeToLargestElement() 函数。

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

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

HTML

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

MyDirectives.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');
                });
            }
        }
    }
});

我的 Controller .js

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

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

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