<div class="row">
<div class="col-xs-12">
<button ng-repeat="item in items track by $index">
{{item}}
</button>
</div>
</div>
我有3个项目,并希望像这样把它们放在
1 2 3
4 5 6
所以我想有两排。但我的ng-repeat是项目本身。我如何解决上述情况?
答案 0 :(得分:0)
在这里,你有一个小提琴我在几秒钟内完成...它应该工作良好没有“行”类。
*{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<!-- Here goes your ng-repeat -->
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
2
</div>
<div class="col-xs-4">
3
</div>
<div class="col-xs-4">
4
</div>
<div class="col-xs-4">
5
</div>
<div class="col-xs-4">
6
</div>
<!-- End of ng-repeat -->
</div>
</div>
答案 1 :(得分:0)
试试这个,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
id: 1,
value: 'column1'
},
{
id: 2,
value: 'column2'
},
{
id: 3,
value: 'column3'
},
{
id: 4,
value: 'column4'
},
{
id: 5,
value: 'column5'
},
{
id: 6,
value: 'column6'
},
{
id: 7,
value: 'column7'
},
{
id: 8,
value: 'column8'
},
];
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" data-semver="4.0.0-alpha.2" data-require="bootstrap@*" />
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" data-semver="4.0.0-alpha.2" data-require="bootstrap@*"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat="item in items">
<div class="col-xs-4">
{{item.value}}
</div>
</div>
</body>
</html>