Question

我使用AngularJS ng-repeat来渲染产品列表，并使用bootstrap col-md-2使其每行显示6个产品。我粘贴了我的代码的简短版本，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
<style type="text/css">
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
       <div class="col-md-2" ng-repeat="item in items">
           <img src="{{itme.imgURL}}" />
           <p>{{item.title}}</p>
           <div>
                <a href="{{item.productURL}}" />
           </div>
       </div> 
    </div>
</div>
</body>

但是，某些产品的标题太长，会以两行或多行显示。在这种情况下，所示元素不能很好地对齐。要查看对齐问题，请尝试以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">        </script>
<style type="text/css">
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>
</body>
</html>

方框7显示在方框2下而不是方框1下。

我知道我们可以在Box 7之前添加clearfix div，或者我们可以将元素7 - 12放在新的bootstrap行中。但问题是我使用了ng-repeat，因此我无法控制每个元素。

那么有人可以给我一些关于如何使所有元素对齐的建议吗？

非常感谢！

Answer 1

您可以尝试类似自定义指令的东西，它将在您的重复的每个项目中调用，然后，当它是最后一项时，您使用setTimeout（）来给出时间来呈现html并调用一个函数将获得高度。

angular.module('box').directive('myRepeatDirective', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            setTimeout(function () {
                scope.$eval('resizeBoxes()');
            }); 
        }
    };
})

在resizeBoxes方法中，我使用JQuery获取最大高度，并在最后设置所有＆＃34;＆lt; p＆gt;＆＃34;高度相同。

.controller("boxController", ['$scope', function ($scope) {
    $scope.boxes = boxes;

    $scope.resizeBoxes = function () {
        var maxHeight = -1;

        $('.col-md-2 p').each(function () {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        $('.col-md-2 p').each(function () {
            $(this).height(maxHeight);
        });
    }
}])

HTML：

<div class="container" ng-controller="boxController">
    <div class="row">
        <div class="col-md-2" ng-repeat="b in boxes" my-repeat-directive>
            <p>{{b.label}}</p>
        </div>
    </div>
</div>

您可以在Plunker

中查看代码

Answer 2

我放this fiddle可能有所帮助。请注意，如果不包含BS，小提琴几乎不会发生任何事情;只需将方法复制到您的项目中即可。

这是一个非常简单的js解决方案，我从一个项目中撤出，我一直遇到同样的问题。（我已经意味着将它构建到一个模块中一段时间了，因为我看到很多开发人员都遇到了同样的问题）

基本上，sizesiblings方法采用jq选择器，并监视元素＆＃39;物理尺寸，根据垂直空间的大小保持均匀“最饥渴的”＃34;元素想要。

您的使用案例可能类似......

好吧，我开始把它放在这里，但它变得笨拙。相反，我更新了the fiddle :)

对sizesiblings('.repeated-items>.col-md-2');的调用应该使所有div都有效。

使用Bootstrap col-md-2时，AngularJS ng-repeat元素不能很好地对齐

2 个答案:

您的使用案例可能类似......