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

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

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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>

Answer 4

从 ul 元素中删除 class =“col-md-4”，然后添加 class =“thumbnail col-md-12” li 元素

如何显示ng-repeat水平？

4 个答案: