Question

我试图创建一个带有文字的Bootstrap轮播。要做到这一点，我需要在旋转木马中使图像的位置绝对。这是旋转木马中的一个图像，然后才变成绝对的

我需要推荐，这是图片上的LA文字。所以我把它变成绝对的，这就发生了

无论我做什么，我似乎无法解决它。

这是我的Slim标记

.container#testimonialsSection
    .carousel.slide#testimoniesCarousel data-ride="carousel"
      ol
        li data-target="#testimoniesCarousel" data-slide-to="0" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="1" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="2" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="3" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="4" class="active"
      .carousel-inner role="listbox"
        .item.active
          = image_tag("losangelesskyline.jpg", :class => "img-responsive")
          h2.center Testimonials
          p This is LA
        .item
          = image_tag("newyorkskyline.jpg")
          p This is NY
        .item
          = image_tag("miamiskyline.jpg")
          p This is Miami
        .item
          = image_tag("bostonskyline.jpg")
          p This is Boston
        .item
          = image_tag("atlantaskyline.jpg")
          p This is Atlanta
      a.left.carousel-control href="#testimoniesCarousel" role="button" data-slide="prev" onclick=""
        span.glyphicon.glyphicon-chevron-left aria-hidden="true"
        span.sr-only Previous
      a.right.carousel-control href="#testimoniesCarousel" role="button" data-slide="next" onclick=""
        span.glyphicon.glyphicon-chevron-right aria-hidden="true"
        span.sr-only Next

这是我的SCSS

.carousel-control.left, .carousel-control.right {
    background-image: none
}

#testimonialsSection {
    height: 70%;
    width: 100%;
}

#testimoniesCarousel {
    width: 100%;
    height: 100%;

    h3 {
        font-size: 300%;
    }
    p {
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
        font-size: 200% !important;
    }
    img {
        position: absolute;
        height: 70%;
        width: 100%;
    }
    .carousel-control.left .glyphicon {
        position: absolute;
        left: 0;
        top: 35%;
        margin-left: 0;
        color: #D6D6D6;
    }
    .carousel-control.right .glyphicon {
        position: absolute;
        right: 0;
        top: 35%;
        margin-right: 0;
        color: #D6D6D6;
    }
}

非常感谢任何帮助。

Answer 1

实际上，我只记得它随着内容的数量而扩展。一旦我将文本添加到其中，图像就会扩展。它现在有效

使图像绝对混乱（Ruby on Rails）

1 个答案: