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

【问题标题】：AngularJS ng-repeat elements don't align well when using Bootstrap col-md-2AngularJS ng-repeat 元素在使用 Bootstrap col-md-2 时不能很好地对齐
【发布时间】：2023-03-26 22:25:01
【问题描述】：

我正在使用 AngularJS ng-repeat 呈现产品列表，并使用引导程序 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>

Box 7 显示在 Box 2 下，而不是 Box 1 下。

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

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

非常感谢！

【问题讨论】：

如何将 clearfix 放在重复中，但将其包装在 ng-if 中？您可以使用重复的索引仅在正确的点包含 clearfix。

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

您可以尝试使用自定义指令之类的方法，该指令将在您重复的每个项目中调用，然后，当它是最后一个项目时，您使用 setTimeout() 提供时间来呈现 html 并调用一个函数将获得高度。

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

在 resizeBoxes 方法中，我使用 JQuery 来获取最大高度，最后将所有“”设置为相同高度。

.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看到代码

【讨论】：

干得好。现在是调用 resizeBoxes() 的好时机。我会将 setTimeout+$eval 更改为简单的 $timeout，以减少代码。

【解决方案2】：

我输入this fiddle 可能会有所帮助。请注意，如果没有 BS，小提琴几乎什么都不做；只需将该方法复制到您的项目中即可。

这是一个非常简单的 js 解决方案，我从一个我一直遇到同样问题的项目中提取出来。（我一直想将它构建到一个模块中，因为我看到很多开发人员遇到了同样的问题）

本质上，sizesiblings 方法采用 jq 选择器，并监控元素的物理尺寸，根据“最饥饿”元素所需的垂直空间量保持它们一致。

您的用例可能类似于...

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

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

【讨论】：