Bootstrap不同的col- *與ng重複

我有一個電影評論示例應用程序建在角度+ 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>

來源

2016-02-05 OmriManor

<div ng-repeat="movie in movies" > 
    <div class="col-md-4 col-xs-6"> 
    <img ng-src='http://image.tmdb.org/t/p/w185/{{movie.poster_path}}' ng-click="chooseMovie(movie)"> 
    </div> 
</div>

這應該可以做到。

我刪除了該行，但我認爲即使它會起作用，除非您使用clearfix類。

網格將自動在「12」列之後的下一行。

所以對於介質屏幕尺寸爲4裝置3每行，6 XS篩選 - > 2 /線:)

來源

2016-02-05 13:17:11 Walfrat

其中一個主要目的'row'類是爲了消除'col- *'類邊界，所以你可以堆疊它們而不浪費填充空間，例如'.row> .col- *> .row> .col- *> ...'。 – delbertooo

如果我記得很好，只要你不使用clearfix，如果你比12更進一步，cols會進入新行，但我不太確定：p。 – Walfrat

嘗試過這一點，但出於某種原因，網格顯示不正確（有時，在「行」中只有一個圖像（不是實際行，因爲我刪除了該div，屏幕上有一行）。因爲我正在使用ng無限滾動庫？ – OmriManor

可以通過使用下面的函數檢測自舉列：

function findBootstrapEnvironment() { 
var envs = ["ExtraSmall", "Small", "Medium", "Large"]; 
var envValues = ["xs", "sm", "md", "lg"]; 

var $el = $('<div>'); 
$el.appendTo($('body')); 

for (var i = envValues.length - 1; i >= 0; i--) { 
    var envVal = envValues[i]; 

    $el.addClass('hidden-'+envVal); 
    if ($el.is(':hidden')) { 
     $el.remove(); 
     return envs[i] 
    } 
};

}

的設置根據返回

if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){ 
$scope.size="Medium" 
}else{ 
$scope.size="Small" 
}

然後W A值範圍第i NG - 如果你可以管理的股利是用3或2張這樣

三張照片，如果媒體

<div ng-repeat="movie in movies" ng-if="size==medium" 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>

照片2張，如果小

<div ng-repeat="movie in movies" ng-if="size==small" class="row slide-left"> 
    <div class="col-sm-4"> 
     <img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])"> 
    </div> 
    <div class="col-sm-4"> 
     <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])"> 
    </div> 
</div>

來源

2016-02-05 13:31:31

Bootstrap不同的col- *與ng重複

回答

相關問題