一排带有 ng-repeat 的 div答案

【问题标题】：One row of divs with ng-repeat一排带有 ng-repeat 的 div
【发布时间】：2016-03-18 15:20:38
【问题描述】：

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

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

我想要的是在包含属性“class”col-md-12”的 div 中包含属性“class”col-md-2”的无限列表。然后我想使用滚动条滚动外部 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 时“偏离路线”都会创建新行。

如何防止这种情况发生？

【问题讨论】：

标签： css angularjs twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

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

尝试将“col-md-12”更改为“row-fluid”

<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

【讨论】：

在使用 row-fluid 和 col-lg-3 示例获得 4 次声誉后，我仍然会出现换行符。
您是否删除了类：col-md-12？并为 .col-md-2 类添加 display: inline-block
是的。不知道是不是继承父母？？
根本没有输出..我试图将您的代码插入到我的其余代码之外，但我仍然没有从数组中获取和输出..
检查数组，删除“newviewslist中的newview”并添加用于测试的“n in ['one', 'two', 'three', 'four', 'five', 'six', '七'，'八']"