jquery - Bootstrap 轮播在滚动时略微向上移动然后再次向下移动

Question

每次轮播滚动时，我的 bootstrap 轮播都会向上移动一点，然后再次向下移动。红线表示方框向上移动的位置。虽然转变的很快，但还是很明显的。我该如何解决这个问题？

<div class="container-fluid">
    <div class="row-fluid">
    <div class="col-md-12">

        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide1 --> 
                <div class="item">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide2 --> 
                <div class="item">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide3 --> 
            </div>

            <div class="control-box">                            
                <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
                <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
            </div><!-- /.control-box -->   

        </div><!-- /#myCarousel -->

    </div><!-- /.col -->          
    </div><!-- /.row --> 
    </div><!-- /.container -->



#myCarousel {
    position: center;
    padding: 2em;
}
/* Thumbnail Box */
.caption h4 {
    font-size: 22px;
    color: #ffffff;
    text-align: left;
    }
        .btn.btn-mini {
            font-size: 18px;
            background-color: #00bcb3;
            color: #ffffff;
            }
/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
    }
    .carousel-control{
        background: #000000;
        display: inline-block;
        font-size: 34px;
        font-weight: 600;
        line-height: 25px;
        opacity: 100;
        padding: 4px 10px 0px;
        position: static;
        height: 40px;
        width: 40px;
        }

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 8000
    })
  });

Answer 1

我在我的 WordPress 网站中使用了完全相同的代码。关键是 WordPress(甚至是我的浏览器？)包含

这样的评论

<!-- /Slide1 -->
<!-- /Slide2 --> 

与

。

这会导致幻灯片 2、3 等降低(第一张幻灯片在开始时没有这样的评论)。请检查您在浏览器中检索到的页面的源代码，并尝试删除这些段落(如果存在)。希望对您有所帮助。

我案例的另一个具体步骤是向类 carousel-inner 添加样式:

div.carousel-inner {
    height: 268px !important;
}  

这是因为我的元素有不同长度的描述，但我希望在相同高度上设置导航按钮，而不考虑高度差。