如何显示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

NG-重复必须在UI元素中不立。

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

Answer 2

除去类= “COL-MD-4”从UL元素，并添加类= “缩略图COL-MD-12”到利元件

Answer 3

所以，如果我正确理解你有多个缩略图？ 在这种情况下，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 4

试试这个。

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>