引导轮播：图像从父 div 中伸出答案

【问题标题】：Bootstrap carousel: image sticks out of parent div引导轮播：图像从父 div 中伸出
【发布时间】：2015-05-08 20:38:25
【问题描述】：

我在页面上设置引导轮播时遇到问题。我希望图像伸出父 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

任何帮助将不胜感激。

【问题讨论】：

我不确定你到底想要什么...环绕整个旋转木马，但旋转木马的高度是 100%……请问你想要的更精确吗？
我在我的问题中添加了一张图纸。
只是为了确保我明白我添加了黑色背景。你想要这样的东西吗？ jsfiddle.net/cr4nud63/1
喜欢这个？ jsfiddle.net/cr4nud63/2
完美，非常感谢。这正是我想要的。确实设置了包装器的最小高度。

标签： javascript html css twitter-bootstrap carousel

【解决方案1】：

您想要一个包装器，将您的“body” div 绝对放在轮播的底部，就像这个小提琴一样：

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

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

【讨论】：