Bootstrap Carousel - 动画和保证金问题

Question

我正在使用Bootstrap 3.2.0。在2.3.2版本上一切正常，但在更新到3.2.0后，我的旋转木马开始表现得很奇怪。

我注意到两个问题：

• 它不是动画（文本应该顺利地吸引并且从代码中的顶部移动）
第一个margin-top上的
• .item是okey（元素位于中间）但最后两个.items更接近div的底部

我的代码在这里：http://jsfiddle.net/crvfn2nL/2/

JS

jQuery(function($) {

    //#main-slider
    $(function(){
        $('#image-slider.carousel').carousel({
            interval: 8000
        });
    });

    $( '.centered' ).each(function( e ) {
        $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
    });

    $(window).resize(function(){
        $( '.centered' ).each(function( e ) {
            $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
        });
    });
});

CSS

 #image-slider #carousel, #image-slider #carousel .carousel-inner {
    width:100%;
    margin:0 auto;
    text-align:center;
    min-height:100%;
}

#image-slider #carousel, #image-slider #carousel .carousel-inner .item {
width:100%;
height:100%;
min-height:100%;
 background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height:400px;
}

.item-nr-1 {
    background:url('http://ibin.co/1iuR0HvTp3aU');
}

.item-nr-2 {
    background:url('http://ibin.co/1iuRE1en7Wdm');
}

.item-nr-3 {
    background:url('http://ibin.co/1iuRPP1uYfye');
}

#image-slider #carousel h2 {
  font-size: 36px;
}


#image-slider .carousel .carousel-inner .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

#image-slider {
    margin-top:80px;    
}

为什么？

感谢

Answer 1

试试这个......

＆＃13;

＆＃13;

	$( '.centered' ).each(function( e ) {
		$(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
	});

	$(window).resize(function(){
		$( '.centered' ).each(function( e ) {
			$(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
		});
	});

＆＃13;

＆＃13;

＆＃13;

之前的保证金最高值随着轮播中的图像而变化。 不是将两个高度的减法除以2，而是分别用不同的值划分。 希望这会有所帮助。