如何水平显示 ng-repeat？

Question

这是 angularjs 和 bootstrap。我需要水平使用 ng-repeat。我如何使用 CSS 或 bootstrap 水平显示我的缩略图？

<div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="phone in topSmartPhone">
            <img src="{{phone.img}}" alt="" />
            <div class="caption">
                <h3>{{phone.name}}</h3>
                <p><strong>Size : </strong> {{phone.size}}</p>
                <p><strong>RAM :</strong> {{phone.ram}}</p>
                <p><strong>Camera :</strong> {{phone.camera}}</p>
                <p><strong>Battry :</strong> {{phone.battery}}</p>
                <p id="description">{{phone.discription}}</p>
            </div>
        </li>
    </ul>
</div>

Answer 1

从 ul 元素中删除 class="col-md-4" 并添加 class="thumbnail col-md-12"到li元素

Answer 2

所以如果我没理解错的话你有多个缩略图？在这种情况下，CSS 将如下所示：

.thumbnail{ 
   display: inline-block;
   width: 19%; //this would be if you would perhaps want 5 thumbnails in a row I have know idea how many you want on a row
}

Answer 3

试试这个。

var app= angular.module("myapp",[]);
        app.controller("ctrl",function($scope){
            $scope.items = [1,2,3,4,5];

        });

.thumbnail{
   float:left;
    width: 60px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="ctrl">
   <div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="item in items">
           
            <div class="caption">
                <h3>{{item}}</h3>
            </div>
        </li>
    </ul>
</div>
</div>

Answer 4

ng-repeat 必须在 ul 元素中而不是 li。

<div class="row">
        <ul id="" class="col-md-4 col-xs-6" ng-repeat="phone in topSmartPhone">
            <li class="thumbnail">
                <img src="{{phone.img}}" alt="" />
                <div class="caption">
                    <h3>{{phone.name}}</h3>
                    <p><strong>Size : </strong> {{phone.size}}</p>
                    <p><strong>RAM :</strong> {{phone.ram}}</p>
                    <p><strong>Camera :</strong> {{phone.camera}}</p>
                    <p><strong>Battry :</strong> {{phone.battery}}</p>
                    <p id="description">{{phone.discription}}</p>
                </div>
            </li>
        </ul>
    </div>

如何水平显示 ng-repeat？

how to show ng-repeat horizontal?

html

css

twitter-bootstrap

angularjs

ng-repeat