[英]carousel-caption move right and take half of carousel
我需要讓我的自舉3 carousel-caption
拿我一半的carousel
,使caption
背景顏色有點透明,並寫一些文字到它。
因此邏輯是,在carousel
背景中,我將擁有圖片,並且對於每個圖片caption
都將使用一半的carousel
白描自定義文本。
參見我的JSFIDDLE示例,我想像這樣。
到目前為止,我已經成功設置了carousel-caption
背景,並且我知道如何將其向左拖動,問題是在右側,只是使float: right
感到困惑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>
輪播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
}
您非常接近-我在您的小提琴中添加了對jquery的引用,但是您通過使用bottom和right屬性解決了您面臨的對齊問題。 Float並不是要走的路,因為您已經絕對定位了.carousel-caption,所以我只為您的課程添加了right:0和bottom: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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.