我有一个情况,我有一个数据列表显示在单独的面板中,使用Bootstrap的网格系统,我想利用宽屏幕和水平显示几个面板,但在狭窄的屏幕上它们堆叠.我目前正在使用这样的ejs在服务器端放置东西,其中列作为查询参数传递,通常设置为2或3,因此每个colClass都是col-sm-6或col-sm-4.
<% var colWidth = 12/columns; var colClass = "col-sm-" + colWidth; %>
<% for(var i=0; i<contestData.classData.length; i++) {%>
<% if ((classCount % columns) == 0) { %>
<div class="row">
<% } %>
<div class="<%= colClass %>">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> <%= contestData.classData[i].name %> </h3>
</div>
<div>...</div>
</div>
</div>
<% classCount++ %>
<% if ((classCount % columns) == 0) { %>
</div>
<% } %>
<% } %>
这样做,但是在服务器端执行这种级别的布局会冒犯我,我真的宁愿用Angular来做这件事,但是我不知道如何在进行ng时将包含适当数量的面板放在div = div的div中-repeat甚至ng-repeat-start =“contestData.classData中的classData”
谢谢！
解决方法
这里是一个简单的解决方案,只有HTML,3 ROWS
<div class="row" >
<div class="col-md-4" ng-repeat-start="item in data">
I'M A ROW
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
