在ng-repeat（AngularJS）的新行上，卡片会失去位置

Question

我正在使用ng-repeat来循环项目。这是代码：

<div class="row"
<div class="w3-card-3 col-xs-18 col-sm-6 col-md-3" ng-repeat="p in products">
    <div class="thumbnail">
        <img ng-src="{{p.img}}" alt="...">
        <div class="caption">
            <h4 class="text-danger">{{p.brand}}</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>

            <a  href="car/{{ p.id }}"  class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i>
            </a> <a href="#" class="btn btn-info btn-xs" role="button">Info</a>

            <a href="#" class="btn btn-default btn-xs" role="button">Bid</a>
        </div>
    </div>
</div>

我的问题是，当转发器进入新线路时，生成的卡片会搞砸。这是问题的图像：

我的代码出了什么问题？为什么这些卡片不能在彼此之下对齐。告诉我你还有什么想看的。

Answer 1

使用图像高度和描述包装它应该解决问题

Answer 2

尝试在下面的div中添加 style =“float：left”：

<div class="thumbnail" style="float: left">