为什么图像不断在旋转木马中跳跃?

时间:2015-11-25 02:16:34

标签: css3 twitter-bootstrap-3

我在网站上工作得很好,我的问题是关于bootstrap上的旋转木马,我尽力修复它..图片是继续跳跃,你可以在这个网站上看到。请帮助.. Click here

这是旋转木马的css ..

/* Phone devices (phone, 767px below) */
  @media (max-width: 767px) {

    .frame {height: 80px;width: 65px;white-space: nowrap;text-align: center; margin: 6% 0;}
    .carousel-control {padding-top:7%;width:6%;font-size: 40px; color: #004890;margin-right: 10px;}
    .carousel-inner {width: 480px;}
    .carousel-inner > .item > img{max-height:80px;max-width: 65px;background: #3A6F9A;vertical-align: middle;}
    #myCarousel {height: 128px;}
    .item{margin-left: 0px;}
    .carousel-indicators {right: 50%;top: auto;bottom: 0px;margin-right: -19px;}
    .carousel-indicators li {background: #f99d1e;}
    .carousel-indicators .active {background: #004890;}
    .thumbnail {border: 0px;}
}
 /* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .frame {height: 70px;width: 125px;white-space: nowrap;text-align: center; margin: 3% 0;}
    .carousel{margin-top: -18px;}
    .carousel-control {padding-top:6%;width:3%;font-size: 30px; color: #004890;} 
    .carousel-inner {width: 840px;}
    .carousel-inner > .item > img{max-height:70px;max-width: 125px;background: #3A6F9A;vertical-align: middle;}
    #myCarousel {height: 126px;} 
    .item{margin-left: 15px;}
    .carousel-indicators {right: 50%;top: auto;bottom: 0px;margin-right: -19px;}
    .carousel-indicators li {background: #f99d1e;}
    .carousel-indicators .active {background: #004890;}
    .thumbnail {border: 0px;}
    .top-margin-75{margin-top: -5px;}  

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .frame {height: 70px;width: 125px;white-space: nowrap;text-align: center; margin: 3% 0;}
    .carousel{margin-top: 0px;}
    .carousel-control {padding-top:6%;width:3%;font-size: 30px; color: #004890;}
    .carousel-inner {width: 840px;}
    .carousel-inner > .item > img{max-height:70px;max-width: 125px;background: #3A6F9A;vertical-align: middle;}
    #myCarousel {height: 128px;}
    .item{margin-left: 15px;}
    .carousel-indicators {right: 50%;top: auto;bottom: 0px;margin-right: -19px;}
    .carousel-indicators li {background: #f99d1e;}
    .carousel-indicators .active {background: #004890;}
    .thumbnail {border: 0px;}
    .top-margin-75{margin-top: -5px;}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .frame {height: 70px;width: 125px;white-space: nowrap;text-align: center; margin: 3% 0;}
    .carousel{margin-top: 0px;}
    .carousel-control {padding-top:6%;width:3%;font-size: 30px; color: #004890;}
    .carousel-inner {width: 840px;}
    .carousel-inner > .item > img{max-height:70px;max-width: 125px;background: #3A6F9A;vertical-align: middle;}
    #myCarousel {height: 128px;}
    .item{margin-left: 15px;}
    .carousel-indicators {right: 50%;top: auto;bottom: 0px;margin-right: -19px;}
    .carousel-indicators li {background: #f99d1e;}
    .carousel-indicators .active {background: #004890;}
    .thumbnail {border: 0px;}
    .top-margin-75{margin-top: -5px;}

}

这是我的问题的照片..

1 个答案:

答案 0 :(得分:0)

我终于明白了,我只修改.item并添加.active

.active{margin-top: -10px;}

.item{margin-left: 15px;margin-top: 25px;}

它起作用..:D干杯..