我建立在AngularJS的数据建立了一个产品网 - 哪里会有图像和产品的详细信息（文本）引导响应产品电网

的文本有时延伸到2号线，造成破坏。

这里是我的代码：

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

这是什么样子：

enter image description here

如何解决它，这样<div>一切都具有相同的高度？我试图在网上寻找解决方案，但我认为我有50％的存在。请帮忙。

注意：我不想隐藏内容。

来源

2014-07-09 Simcha Khabinsky

我认为唯一的选择是创建三个包含列'（COL-XS-4）'的里面做的每一个重复和每一个项目拆分为基础的适当的立柱在伯爵身上。我不知道如何做到这一点，所以我刚刚提出了这个问题。我用我的选择语言多次遇到这个问题。 –

我的解决方案不会让高度相等，你需要'jquery'。您将在加载完所有项目后循环，并将最小高度设置为与最大产品'div'相同。 –

这就是我最终为那些在未来再次遇到此问题的人所做的。

的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更改或窗口大小调整时，都会显示函数。

要知道$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', ....]);

来源

2014-07-09 19:29:36

一个优秀而彻底的解决方案来解决我的确切问题。非常感谢。 – isherwood

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

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

或者，你总是可以使用一个响应表（<table class="table table-responsive">）为您的布局。

来源

2014-07-09 17:03:24 Ranveer

不想隐藏内容。抱歉更新问题。 –

然后，获取最大高度的“div”的高度并将其设置为所有高度。或者使用表格布局。 – Ranveer

获取最大高度 - 做到这一点，但...你可以调用浏览器调整大小的功能？ –

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

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

来源

2014-07-09 17:27:19

这个问题的最佳解决方案是将clearfix类添加到隐藏的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?>

来源

2015-12-22 16:12:22

引导响应产品电网

回答