Question

我正在尝试使用以下代码

使用引导面板进行角度ng-repeat

<div class="row" ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
  <div class="col-sm-4">
     <div class="panel-group">
      <div class="panel panel-primary">
      <div class="panel-heading">{{user.firstname}}</div>

      <div class="panel-body">Panel Content</div>
      <div class="panel-footer">Footer</div>
    </div>
</div>

  </div>
</div>

它的工作正常，但它的外观是垂直的而不是并排的。如何将这些面板并排设置？

有没有办法实现这些功能？

提前致谢。

Answer 1

使用ng-repeat而不是.col-sm-4，如下所示

<div class="row">
  <div class="col-sm-4" 
       data-ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
     <div class="panel-group">
        <div class="panel panel-primary">
          <div class="panel-heading">{{user.firstname}}</div>
          <div class="panel-body">Panel Content</div>
          <div class="panel-footer">Footer</div>
    </div>
</div>

Bootstrap行适用于12格。但如果一行有超过12个网格，它将换行换行..

Answer 2

<div ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="row" >
  <div class="col-sm-4">
     <div class="panel-group">
      <div class="panel panel-primary">
      <div class="panel-heading">{{user.firstname}}</div>

      <div class="panel-body">Panel Content</div>
      <div class="panel-footer">Footer</div>
    </div>
</div>

  </div>
</div>
</div>

你错过了布局。可能这可能对你有所帮助

具有角度ng重复的自举面板

2 个答案: