twitter-bootstrap 如何水平显示ng-repeat？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35817904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show ng-repeat horizontal?
提问by Kalagar
this is an angularjs and bootstrap. I need to use ng-repeat horizontally. how can I use CSS or bootstrap to show my thumbnails horizontally ?
这是一个 angularjs 和引导程序。我需要水平使用 ng-repeat。如何使用 CSS 或引导程序水平显示我的缩略图？
<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>
回答by jasper
So if I understand correctly you have multiple thumbnails? In that case the CSS would look like this:
所以如果我理解正确的话，你有多个缩略图？在这种情况下，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
}
回答by Hadi J
try this.
试试这个。
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>回答by Kalagar
ng-repeat must be in ul element not li.
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>
回答by Hady Allam
remove class="col-md-4"from ulelement and add class="thumbnail col-md-12"to lielement
从ul元素中删除class="col-md-4"并将class="thumbnail col-md-12" 添加到li元素
