我有一個電影評論示例應用程序建在角度+ bootstrap,我試圖建立一個「網格」的3個圖像的中等和向上屏幕,問題是當我想每xs屏幕只有2個圖像。Bootstrap不同的col- *與ng重複
我正在使用ng-repeat並填充cols中的imgs。
有沒有一個很好的方法來做到這一點? (我知道$ index + N可能超出範圍,並且這裏存在代碼重複,只是希望找到一個很好的解決方案,用於在動態數據上重新佈置不同屏幕尺寸的自舉網格)
<div ng-repeat="movie in movies" ng-if="$index % 3 == 0" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>
其中一個主要目的'row'類是爲了消除'col- *'類邊界,所以你可以堆疊它們而不浪費填充空間,例如'.row> .col- *> .row> .col- *> ...'。 – delbertooo
如果我記得很好,只要你不使用clearfix,如果你比12更進一步,cols會進入新行,但我不太確定:p。 – Walfrat
嘗試過這一點,但出於某種原因,網格顯示不正確(有時,在「行」中只有一個圖像(不是實際行,因爲我刪除了該div,屏幕上有一行)。因爲我正在使用ng無限滾動庫? – OmriManor