一行带有ng-repeat的div

Question

我需要创建一个div列表，如下图所示：

我正在使用Bootstrap网格系统和augularjs。我使用angularjs ng-repeat指令动态创建div。

我想要的是包含属性'class'col-md-2“'的div的无穷无尽的列表，其中div包含属性'class'col-md-12”'。然后我想使用滚动条滚动外部div中的所有div。

示例代码：

    <div class="col-md-12" scrollablebar>
        <div ng-repeat="newview in newviewslist" class="col-md-2">
            Here goes the date from newview... 
        </div>
    </div>

这不起作用，每次ng-repeat创建div时，“off course”正在创建新行。

如何防止这种情况发生？

Answer 1

我解决了这个问题：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10 col-xs-11" scrollablehorizontal>
        <table class="borderless">
            <tbody>
                <tr>
                    <td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
                        <p>
                            all the things... 
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>

Answer 2

在col-md-12中，在有一个换行符之后可以有6 x col-md-2。

尝试改变＆＃34; col-md-12＆＃34; to＆＃34; row-fluid＆＃34;

<div class="row-fluid" scrollablebar>
    <div ng-repeat="newview in newviewslist" class="col-md-2">
        Here goes the date from newview... 
    </div>
</div>

并添加css：

.row-fluid{
   white-space: nowrap;
}

.row-fluid .col-md-2{
    display: inline-block;
    margin-left:10px;
}

jsfiddle