Question

我在这个链接上创建了滑块 - https://codepen.io/crashy/pen/JoKMgG/ - 复制完全相同，并且它完美地适用于所有浏览器，但由于某些原因我无法弄清楚为什么会在移动设备中显示轮播。任何帮助都会很棒。

引导模板：新时代

CSS

html {
    position: relative;
    min-height: 100%;
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.item:nth-child(1) {
    background: url(../img/img-slide-1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(2) {
    background: url(../img/img-slide-2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(3) {
    background: url(../img/img-slide-3.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(4) {
    background: url(../img/img-slide-4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(5) {
    background: url(../img/img-slide-5.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel {
    z-index: -99;
}
.carousel .item {
    position: fixed;
    width: 100%;
    height: 100%;
}
.title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  color: #FFF;
  position: absolute;
  top: 40%;
  width: 100%;
}

HTML

<header class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <div class="title">
                    <h1>INNOVATIVE</h1>
                    <div class="intro-copy">
                    Sophisticated and cutting-edge solutions for edgy and out-of- the-box projects
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>EFFICIENT</h1>
                    <div class="intro-copy">
                    Space-efficient and cost-effective developments
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>SMART INTEGRATION</h1>
                    <div class="intro-copy">
                    Technology integration to enhance standards of living and maximize resources
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>CREATIVE DESIGNS</h1>
                    <div class="intro-copy">
                    Iconic design solutions and memorable developments
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>COMPREHENSIVE SERVICE PROVIDERS</h1>
                    <div class="intro-copy">
                    Specializing in a wide range of multi-disciplinary services
                    </div>
                  </div>
                </div>
            </div>
        </div>

        <!-- Remeber to put all the content you want on top of the slider below the slider code -->
    </header>

Answer 1

问题在于new-age.min.css，这个：

@media (min-width: 768px)
header {
    min-height: 100%;
}

您可以在没有mediaquery的情况下添加并强制CSS中标题的最小高度，因此适用于所有屏幕尺寸。在页面的HEAD中添加以下样式：

<style type="text/css">
   header {
      min-height: 100%;
   }
</style>

为什么我的带有淡入效果的bootstrap全屏背景轮播没有显示在手机中？

1 个答案: