Bootstrap Carousel 无法在内部运行 div

Question

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

DEMO div（不工作）：https://jsfiddle.net/55gfw2jg/

DEMO 没有 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 生成的。

Answer 1

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

我补充道：

div{
  height:100%;
}

Answer 2

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

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

jquery

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

css

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

参见 fiddle https://jsfiddle.net/x07q5o6z/

Bootstrap Carousel 无法在内部运行 div

Bootstap Carousel won't work inside div

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-carousel