Bootstrap 旋转木马：图像从父项中伸出 div

Question

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

这是我当前的代码：

<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

你想要一个包装器，将你的 "body" div 绝对放在你的旋转木马的底部，就像这样 fiddle :

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

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

Bootstrap 旋转木马：图像从父项中伸出 div

Bootstrap carousel: image sticks out of parent div

html

javascript

css

carousel

twitter-bootstrap