使用 ng-repeat 引导不同的 col-*答案

【问题标题】：Bootstrap different col-* with ng-repeat使用 ng-repeat 引导不同的 col-*
【发布时间】：2016-02-05 21:56:16
【问题描述】：

我有一个内置 angular + bootstrap 的电影评论示例应用程序，我正在尝试为中等和以上屏幕构建 3 个图像的“网格”，问题是当我希望每个图像只有 2 个时xs 屏幕的行。

我正在使用 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>

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

<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 个，xs 屏幕为 6 ->2/行 :)

【讨论】：

row 类的主要目的之一是消除col-* 类的边距，这样您就可以在不浪费填充空间的情况下堆叠它们，例如.row > .col-* > .row > .col-* > ....
如果我记得很清楚，只要你不使用 clearfix，如果你超过 12，cols 就会换行，但我不太确定：p。
已经试过了，但由于某种原因，网格显示不正确（有时，“行”中只有一个图像（不是实际行，因为我删除了那个 div，在屏幕）。可能是因为我使用的是 ng 无限滚动库？
@Walfrat 没错。它们只是浮动元素。
@OmriManor：不。我的盲目猜测是你的 col 内部某处的元素比 col 想要的要宽。例如。 col 希望它的宽度在当前屏幕尺寸下为 200px，而您的 img 宽度为 300px。结果：img 将 col 拉伸到 300px 之类的东西。它可以是任何元素，因此请使用检查器查看哪个元素如此宽。如果真的是 img，请尝试使用引导程序 img-responsive 类 (getbootstrap.com/css/#images-responsive)。

【解决方案2】：

您可以使用以下函数检测引导列：

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"
}

然后使用 ng-if 你可以将 div 管理为包含 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>

如果小的话两张照片

    <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>

【讨论】：