Bootstrap Carousel 在 div 中不起作用答案

【问题标题】：Bootstap Carousel won't work inside divBootstrap Carousel 在 div 中不起作用
【发布时间】：2016-06-12 00:03:51
【问题描述】：

我正在使用 Bootstrap 并在 100% 高度使用 Carousel 构建网站。问题是它可以工作，但不能在另一个 div 中工作。我的 Joomla 系统默认生成两个 div，所以我无法避免这种情况。我应该如何解决这个问题？

带 div 的演示（不工作）：https://jsfiddle.net/55gfw2jg/

没有 div 的演示（工作）：https://jsfiddle.net/55gfw2jg/1/

HTML：

        <div>
        <div>
        <header id="myCarousel" class="carousel slide">
        <!-- 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>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </header>
    </div>
    </div>

CSS：

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

JS：

$('.carousel').carousel({
    interval: 5000 //changes the speed
})

如果我删除<header> 之前和之后的两个“div”，则代码有效。我如何使它工作？我不能取消这两个 div，因为它是由 Joomla 生成的。

【问题讨论】：

div 没有宽度或高度，您需要给它们一个宽度：100%；和高度：100%；

标签： twitter-bootstrap css twitter-bootstrap-3 bootstrap-carousel

【解决方案1】：

问题是两个外部 div 没有高度，因此您的旋转木马根据高度 0 被赋予 100% 的高度。

给div 100% 的高度可能会导致其他 div 出现问题，因此如果您无法控制这两个外部 div 并且它们总是出现在代码的最顶部，您可以使用一些 jquery 添加一个类到第一个 div 和其中的第一个 div，然后将高度分配给这些类。

jquery

$( "div" ).first().addClass( "outter" );
$( "div div" ).first().addClass( "inner" );

css

.outter, .inner{
      height: 100%;
}

见小提琴https://jsfiddle.net/x07q5o6z/

【讨论】：

【解决方案2】：

问题是添加的额外 div 的高度：这里正在处理你的两个 div-https://jsfiddle.net/55gfw2jg/3/

我补充说：

div{
  height:100%;
}

【讨论】：