滚动时，Bootstrap 轮播会稍微向上移动然后再次向下移动答案

【问题标题】：Bootstrap carousel moves slightly up then down again when scrolling滚动时，Bootstrap 轮播会稍微向上移动然后再次向下移动
【发布时间】：2021-03-29 04:18:21
【问题描述】：

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

<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
    })
  });

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

我在我的 WordPress 网站中使用了完全相同的代码。关键是 WordPress（甚至我的浏览器？）像

这样包装 cmets

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

与

。

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

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

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

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

【讨论】：

【解决方案2】：

你有没有试过给max-height它会限制旋转木马上下移动。请注意，Bootstrap 有它自己的 CSS，但它可能不适合您的网站。您可能需要编写自己的 css 以忽略引导 CSS

【讨论】：

谢谢，只是尝试了 max-height 但轮播仍然移动。

【解决方案3】：

这可能是由于您当前的样式表。首先，查看您的主样式表中的margin-top 或margin-bottom 属性属于container-fluid 类。您很可能会找到解决方案。

【讨论】：

【解决方案4】：

当您使用的图片尺寸不同时，通常会发生这种情况。尝试为 img 和 margin 属性创建一个选择器。您可以在 CSS 中尝试以下操作： .carousel-inner img{ 高度：150px；边距：自动； }

【讨论】：

【解决方案5】：

您可以为“.carousel-inner”设置内边距或边距，尽量避免为主“.carousel”使用内边距和边距。

【讨论】：

【解决方案6】：

您必须在 img 元素中提供相同的 height。

.thumbnail img{
    height: 650px !important;
    width: 100%;
    margin: 0;

}

【讨论】：