在 ng-repeat (AngularJS) 中换行时,卡片会丢失它们的位置
cards lose their position when on new line in ng-repeat (AngularJS)
我正在使用 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>
我的问题是,当中继器进入新行时,生成的卡片变得混乱。这是问题的图片:
我的代码有什么问题?为什么卡片不会在彼此下方对齐。还有什么想看的告诉我
尝试在下面的div中添加style="float: left":
<div class="thumbnail" style="float: left">
使用图像高度和描述包装应该可以解决问题
我正在使用 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>
我的问题是,当中继器进入新行时,生成的卡片变得混乱。这是问题的图片:
我的代码有什么问题?为什么卡片不会在彼此下方对齐。还有什么想看的告诉我
尝试在下面的div中添加style="float: left":
<div class="thumbnail" style="float: left">
使用图像高度和描述包装应该可以解决问题