Question

我只是想知道是否有任何方法可以设置引导列断点的动画。例如，我有这个简单的列设置：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12"></div>
    <div class="col-md-6 col-sm-12"></div>
  </div>
</div>

现在您可以在小型设备上看到，这将使用col-sm-12在不同的行显示div。

我希望能够在达到此断点时进行良好的转换。在我缩放浏览器视口时，没有转换。我不会介意该列淡入新线或向下滑动而不是立即突破新线。

我尝试过全部使用CSS转换：

-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;

然而，这不起作用，它只是将列的宽度而不是断点转换到新行。

知道如何做到这一点吗？

谢谢，尼克

Answer 1

您需要使用class =＆＃34; col-md-6 col-sm-12＆＃34;来定位div。

像这样：

.col-md-6.col-sm-12 {
  transition: all 1.5s linear; 
  -o-transition: all 1.5s linear; 
  -moz-transition: all 1.5s linear; 
  -webkit-transition: all 1.5s linear;
}

我添加了更长的过渡时间，以便您可以更好地观察效果。

Animate Bootstrap列断点

1 个答案: