Bootstrap网格类与其他类结合使用

Question

所以我从互联网上下载了这个名为.slideanim的课程。

另外，我使用bootstrap网格类，我该如何组合它们？

当我在那之间尝试空间时，它不起作用。

HTML：

<div style="position: relative" class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-push-4">
    <div class="hovereffect">
        <img class="img-responsive" src="../User/Pictures/ShirtCheck.png" alt="">
            <div class="overlay">
                <h2>Add to cart</h2>
                <p class="icon-links">
                    <a href="#">Text</a>
                </p>
            </div>

    </div>
</div>

的CSS：

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
} 

脚本：

<script>     

  $(window).scroll(function() {
  $(".slideanim").each(function(){
  var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
      </script> 

我尝试过：

<div style="position: relative" class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-push-4 slideanim">
        <div class="hovereffect">
            <img class="img-responsive" src="../User/Pictures/ShirtCheck.png" alt="">
                <div class="overlay">
                    <h2>Add to cart</h2>
                    <p class="icon-links">
                        <a href="#">Text</a>
                    </p>
                </div>

        </div>
    </div>