Javascript 引导转盘:图像从父div中伸出

Javascript 引导转盘:图像从父div中伸出,javascript,html,css,twitter-bootstrap,carousel,Javascript,Html,Css,Twitter Bootstrap,Carousel,在我的页面上设置引导转盘时遇到问题。我希望图像伸出父div(因此图像不应附着在父div的顶部,而应附着在底部)。我怎样才能做到这样的行为?我已经尝试了一些定位,但没有成功(总是破坏默认的旋转木马行为)。我创建了一个小草图,它应该是什么样子: 这是我目前的代码: <div id="body"> <section id="projects"> <div id="carousel-example-generic" class="carousel

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

  • 我还为此创建了一个JSFIDLE:


    我们将非常感谢您的帮助

    您希望有一个包装器,将您的“body”div完全放在旋转木马的底部,就像在这把小提琴中一样:

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

    我不确定你到底想要什么。。。因为目前你的引导式卡鲁塞尔没有连接到父母的“顶部”,只是你的身体没有环绕整个卡鲁塞尔,但卡鲁塞尔的高度是100%。。。你能更准确地说你想要什么吗?我在我的问题上加了一幅画。为了确保我理解,我加了一个黑色背景。你想要这样的吗?这样地?太好了,非常感谢。这正是我想要的。这是正确的设置最小高度的包装应该在那里。