使用Bootstrap col-md-2時AngularJS ng-repeat元素無法很好地對齊

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放在新的引導行中。 但是問題是我使用了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來獲取最大高度，最后設置所有具有相同高度的“ <p>”。

.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

我把這個小提琴放了起來，可能會有所幫助。 請注意，如果沒有BS include，小提琴幾乎什么也不做。 只需將方法復制到您的項目中即可。

這是一個非常簡單的js解決方案，是我從一個遇到同樣問題的項目中提取的。 （我一直打算將其構建到模塊中一段時間，因為我看到大量的開發人員遇到了同樣的問題）

本質上， sizesiblings方法采用jq選擇器，並監視元素的物理尺寸，並根據“最粗大”元素所需的垂直空間量使它們保持一致。

您的用例可能類似於...

好吧，我開始把它放在這里，但是笨拙。 相反，我更新了小提琴 :)

調用sizesiblings('.repeated-items>.col-md-2'); 應該使所有div表現良好。

使用Bootstrap col-md-2時AngularJS ng-repeat元素無法很好地對齊

問題描述

2 個解決方案

解決方案1
1 2015-11-10 03:52:41

解決方案2
0 2015-11-08 03:20:25

您的用例可能類似於...

使用Bootstrap col-md-2時AngularJS ng-repeat元素無法很好地對齊

問題描述

2 個解決方案

解決方案1 1 2015-11-10 03:52:41

解決方案2 0 2015-11-08 03:20:25

您的用例可能類似於...

解決方案1
1 2015-11-10 03:52:41

解決方案2
0 2015-11-08 03:20:25