0

我正在使用 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
})

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

4

2 回答 2

1

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

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

jQuery

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

css

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

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

于 2016-06-12T00:24:58.273 回答
0

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

我补充说：

div{
  height:100%;
}
于 2016-06-12T00:14:19.283 回答