Question

我需要让我的引导程序3 carousel-caption占用carousel的一半，使caption背景颜色变得有点透明，并在其中写入一些文字。

所以逻辑是在carousel背景中我会有图片，而每张图片caption都会占用carousel个自定义文字的一半。

请参阅我的JSFIDDLE示例，我希望这样做。

到目前为止，我设法设置了carousel-caption的背景，我知道如何将其拉向左侧，问题是正确的，这只是让float: right想要工作的方式感到困惑，更多有一个小padding-bottom所以如何删除它？任何人都可以帮我解决这个问题并正确构建，谢谢。

<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
    <!-- Menu -->
    <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>
    <!-- Items -->
    <div class="carousel-inner">
        <!-- Item 1 -->
        <div class="item active">
            <img src="http://lorempixel.com/1500/600/abstract/1" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Bootstrap 3 Carousel Layout</h1>

                    <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
                    <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>

                    </p>
                </div>
            </div>
        </div>
        <!-- Item 2 -->
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/2" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Changes to the Grid</h1>

                    <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                    <p><a class="btn btn-large btn-primary" href="#">Learn more</a>

                    </p>
                </div>
            </div>
        </div>
        <!-- Item 3 -->
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/3" />
            <div class="container">
                <div class="carousel-caption">
                     <h1>Percentage-based sizing</h1>

                    <p>With "mobile-first" there is now only one percentage-based grid.</p>
                    <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>

                    </p>
                </div>
            </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> 
</div>

Carousel CSS：

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}
.carousel-caption {
    position: absolute;
    left: auto;
    right: auto;
    width: 50%;
    height: 100%;
    background-color: #428bca;
    opacity: 0.8
}

Answer 1

你非常接近 - 我在你的小提琴中添加了对jquery的引用，但是你所面对的对齐问题是通过使用bottom和right属性来解决的。浮动不是去这里的方法，因为你已经完全定位了.carousel-caption，我刚刚添加了一个右边：0，一个底部：0到你的班级。

.carousel-caption {
    position: absolute;
    left: auto;
    right: auto;
    width: 50%;
    height: 100%;
    background-color: #428bca;
    opacity: 0.8;
    bottom:0;
    right:0;
}

请在此处查看更新的小提琴 https://jsfiddle.net/jy989rkt/4/

旋转木马标题向右移动并取一半的旋转木马

1 个答案: