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 () {...});

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

mycontroller.js

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

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

注意：这要求您在AngularJS依赖关系列表中包含$window。 I.E. angular.module('myApp').controller('....', ['...., '$window', ....]);

Answer 2

如果要保持每个产品的高度动态，则需要将结果拆分为列。然后使用ng-if将正确的项目放在右列中。每个第3项都将进入同一列。要将它们设置为不同的列，只需将每个额外列的$index减少1。

<div class="row">
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="$index%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-1)%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
    <div class="col-xs-4">
        <div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-2)%3==0">
            <div>
              <img ng-src="{{s.ProductImage}}" class="img-responsive" />
            </div>
            <div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
          </a>
            <div class="clearfix visible-xs-block"></div>
        </div>
    </div>
</div>

Answer 3

您可以手动限制div的高度并使用overflow。使用像

这样的东西

<div class="col-xs-4" style="height:200px; overflow: auto;">Content</div>

或者，您可以随时使用响应表（<table class="table table-responsive">）进行布局。

Answer 4

此问题的最佳解决方案是将clearfix类添加到视口的earch大小的隐藏div中。例如：

大尺寸：我想要6列（大型台式机）
中等大小：我想要4列（桌面）
平板电脑：我想要3个coumns
手机：我想要2列

所以我有产品清单：

<?php $count=1; foreach($productList as $product) : ?>
    <div class="item col-xs-6 col-sm-4 col-md-3 col-lg-2">
            Picture and description
    </div><!-- /item -->

    <?php if( ($count%2)==0) {?><div class="clearfix visible-xs-block"></div><?php }?>
    <?php if( ($count%3)==0) {?><div class="clearfix visible-sm-block"></div><?php }?>
    <?php if( ($count%4)==0) {?><div class="clearfix visible-md-block"></div><?php }?>
    <?php if( ($count%6)==0) {?><div class="clearfix visible-lg-block"></div><?php }?>

<?php $count++; endforeach?>