Question

我在页面上设置bootstrap轮播时遇到问题。我希望图像伸出父div（因此图像不应该附加在父div的顶部而不是底部）。我怎样才能实现这样的行为？我已经尝试了一些定位而没有任何成功（总是破坏默认的轮播行为）。我创建了一个小草图，它应该是什么样子：

sketch

这是我目前的代码：

<div id="body">
    <section id="projects">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img class="img-responsive center-block" src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" alt="" />
                </div>
                <div class="item">
                    <img class="img-responsive center-block" src="http://www.newyork-reise.de/start/frei1.jpg" alt="">
                </div>
            </div>
            <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

        </div>
</div>
</section>
</div>

我还为此创建了一个jsFiddle：fiddle

任何帮助都将受到高度赞赏。

Answer 1

你想要一个包装器，将你的＆＃34;身体＆＃34; div绝对位于你的旋转木马底部，就像这个小提琴一样：

       #body {
bottom: 0;
height:200px;
background-color: lightblue;
width: 100%;
position: absolute;
}
.wrapper{
   position: relative;
}

http://jsfiddle.net/cr4nud63/2/

Bootstrap轮播：图像伸出父div

1 个答案: