Question

我正在使用Bootstrap构建一个网站，并使用100％高度的Carousel。问题是它有效，但不在另一个div内。我的Joomla系统默认生成两个div，所以我无法避免。我该如何解决这个问题？

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

没有div的DEMO（工作）：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”，代码就可以工作。我如何使其工作？我无法取消由Joomla生成的两个div。

Answer 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/

Answer 2

问题是增加了额外div的高度：这里有你的divs https://jsfiddle.net/55gfw2jg/3/

我补充说：

div{
  height:100%;
}

Bootstap Carousel不会在div内部工作

2 个答案: