Question

我正在ng-repeat旁边实施Bootstrap崩溃。我有两个实现，其中一个，两个动画都在工作，另一个，只有开放动画正在工作。可折叠元素的关闭不会动画，它会立即收缩。这两个实现之间的区别在于，工作的指令没有嵌套的ng-repeat指令，而非工作的指令则没有，而最里面的子元素有弹出窗口。我的直觉告诉我，问题出在那里。对于这个确切的问题，我找不到任何其他问题。

HTML

<div ng-repeat="bar in foo.bars">
    <h4 class="row" role="button" data-toggle="collapse" href="#bar-{{$index}}" aria-expanded="true" aria-controls="bar-{{$index}}">{{bar.name}}</h4>
    <div id="bar-{{$index}}" class="collapse in">                                                   
        <div ng-repeat="barType in bar.types">                                                          
            <div class="col-xs-1 instance" ng-repeat="barChild in barType">
                <div class="bar-subcontainer">
                    <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click">
                       {{barChild.ID}}
                    </a>    
                </div>                                              
            </div>
        </div>                              
    </div>                  
</div>

Answer 1

问题实际上是你应用于每个barChild div的col-xs-1类。特别是，风格'浮动：左;'这是继承的。

要测试它，请添加样式规则：

.instance { float:none; }

当然，这将解决平稳崩溃，但会破坏现有的布局。也许您可以使用表格布局来重新创建所需的UI。

Answer 2

@GPicazo提到的表格实现工作。

<强> HTML

In [33]:

import numpy as np
import rpy2.robjects as robjects
robjects.reval('m1 <- c(1:10)')
robjects.reval("m2 <- matrix(as.complex(m1), nrow=5)")
np.array(list(robjects.r.m2)).reshape(robjects.r.m2.dim)

Out[33]:
array([[  1.+0.j,   2.+0.j],
       [  3.+0.j,   4.+0.j],
       [  5.+0.j,   6.+0.j],
       [  7.+0.j,   8.+0.j],
       [  9.+0.j,  10.+0.j]])

以上内容嵌套在最外面的<table> <tr ng-repeat="barType in bar.types"> <td class="col-xs-1 instance" ng-repeat="barChild in barType"> <div class="bar-subcontainer"> <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click"> {{barChild.ID}} </a> </div> </td> </tr> </table>内，并嵌入原始代码中。

Bootstrap崩溃：没有关闭动画

2 个答案: