问题bootstrap 3旋转木马改变高度为0px和边缘为-…px

issues bootstrap 3 Carousel changing height to 0px and marigin to -.....px

本文关键字：边缘 px 0px 问题 旋转木马 改变 高度 bootstrap      更新时间：2023-09-26

我添加到我的网站的Carousel行为真的很奇怪。在2周期内，幻灯片向上滑动。父div的高度变为0px，子div的边距变为负边距。在bootstrap网站上的例子中，这种情况不会发生。我从引导网站复制了最新的代码，找不到我做错了什么。

如果有人能帮助我，我会很高兴的。

http://humandemo.cloudaccess。

代码:

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>   
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
            </div>
            <div class="item">
                <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    </div>

我猜这是mootools-more.js的工作。这个脚本包含Fx.Slide类:

滑动效果水平或垂直滑动元素。里面的东西会折叠起来。

尝试注释这个脚本

@Jeroen:我已经检查了你的网站，并尝试了一些改变与Css的"Inspect Element"和按我的你应该检查div id="myCarousel"和div class="carousel-inner"。它们是否被设置了高度。

你的bootstrap carousel代码是完美的，没有问题。你的另一个脚本可能有问题，我在codependency中使用了你的代码，它的工作非常好。

我在@Gleb Kemarsky的回答之后做了一些研究，谢谢你。确实mootools与bootstrap有冲突，参见:https://github.com/joomla/joomla-cms/issues/475

修复方法:

if (typeof jQuery != 'undefined') { 
(function($) { 
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
相关文章：