当图像div小于768px时，它会在bootstrap carousel上消失

Question

我正在尝试制作一个响应式自举旋转木马，它在桌面上非常完美，但当它低于768像素时，幻灯片会尝试在背景上显示并消失，我一直在搜索，我不会看到并回答你可以帮助我们。

HTML代码如下：

   <!-- Full Page Image Background Carousel Header -->
<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('../One/b1.png');"></div>
            <div class="carousel-caption">
                <div class="header-content">
                    <div class="header-content-inner">
                        <h1>Your Favorite Source of Free Bootstrap Themes</h1>
                        <hr>
                        <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
                        <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('../One/b2.png');"></div>
            <div class="carousel-caption">
                <div class="header-content">
                    <div class="header-content-inner">
                        <h1>Your Favorite Source of Free Bootstrap Themes</h1>
                        <hr>
                        <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
                        <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('../One/b3.png');"></div>
            <div class="carousel-caption">
                <div class="header-content">
                    <div class="header-content-inner">
                        <h1>Your Favorite Source of Free Bootstrap Themes</h1>
                        <hr>
                        <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
                        <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>

CSS就像：

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
}

header .header-content .header-content-inner hr {
    margin: 30px auto;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
}
@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }

    .carousel{
    height: 100%;
    }

}

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


.section-heading {
    margin-top: 0;
}

.service-box {
    margin: 50px auto 0;
    max-width: 400px;
}


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

.carousel-inner {
    height: 100%;
}

这是我正在尝试构建的演示：

https://studio73-luisjmrtnz.c9users.io/slider/