滚动时，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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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="#">» 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
})
});
6 个答案:
答案 0 :(得分：1)
我在WordPress网站上使用了完全相同的代码。关键是WordPress（甚至我的浏览器？）包含像
这样的评论<!-- /Slide1 -->
<!-- /Slide2 -->
与 ＆LT; p为H. ＆LT; / P取代。
导致幻灯片2,3等的降低（第一张幻灯片在开头没有这样的评论）。请检查您在浏览器中检索的页面的源代码，并尝试删除这些段落（如果存在）。希望它会有所帮助。
我的案例步骤的另一个具体方法是将类型添加到类carousel-inner：
div.carousel-inner {
height: 268px !important;
}
由于我的项目有不同的描述长度，但我希望导航按钮在同一高度，而不考虑高度差。
答案 1 :(得分：0)
您是否尝试过max-height它会限制旋转木马上下移动。请注意，Bootstrap有自己的CSS，但可能不适合您的网站。你可能需要编写自己的css来忽略bootstrap CSS
答案 2 :(得分：0)
这可能是由于您当前的样式表。首先，查看属于margin-top类的margin-bottom或container-fluid属性的主样式表。你很可能会找到解决方案。
答案 3 :(得分：0)
当您使用的图像尺寸不同时，通常会发生这种情况。尝试为img和margin属性创建一个选择器。您可以在css中尝试以下操作： .carousel-inner a img { 高度：150像素; 保证金：汽车; }
答案 4 :(得分：0)
您可以为“.carousel-inner”设置填充或边距，尽量避免使用填充和边距为主“.carousel”。
答案 5 :(得分：0)
您必须在 img 元素中提供相同的 height。
.thumbnail img{
height: 650px !important;
width: 100%;
margin: 0;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？