Question

<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是项目本身。我如何解决上述情况？

Answer 1

在这里，你有一个小提琴我在几秒钟内完成...它应该工作良好没有“行”类。

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

Answer 2

试试这个，

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>

使用bootstrap重复多行

2 个答案: