角度ng视图幻灯片动画进入和离开元素一个放在另一个之下

Question

我正在尝试为ng-view指令设置动画。当第一个元素离开时，它在x方向上向右移动，当下一个元素进入时，它在x方向但从左侧转换，如下图所示。

但问题是元素是一个在另一个之下。 incomming元素infact放在传出元素的左边，但在下面。如果我检查我看到div是一个在另一个下面。我正在使用bootstrap，它在这里扮演什么角色？我怎样才能让它们并排而不是一个在另一个之下呢？

这是css

.step1Slide{
    opacity:1;
}

.step1Slide.ng-enter {
    transform: translateX(-100%);
    z-index: 10;
    transition:transform 3s linear;
}

.step1Slide.ng-enter-active {
    transform: translateX(0);
    z-index: 10;
    transition:transform 3s linear;
}

.step1Slide.ng-leave {
    transform: translateX(0);
    z-index: 1;
    transition:transform 3s linear;
}

.step1Slide.ng-leave-active {
    transform: translateX(100%);
    z-index: 1;
    transition:transform 3s linear;
}

和html

<div class="row">
    <div id="registerNgView" class="step1Slide" ng-view>

    </div>
</div>