Bootstrap轮播：图像伸出父div

时间：2022-11-03 20:20:58

I have a problem setting up bootstrap carousel on my page. I want the the image sticks out of the parent div (so the image should not be attached at the top of the parent div instead on the bottom). How can I achieve such a behaviour? I already tried some positioning without any success (always destroys the default carousel behaviour). I created a small sketch how it should look like:

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

Bootstrap轮播：图像伸出父div

Here is my current code:

这是我目前的代码:

<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>

I also created a jsFiddle for that: fiddle

我也为此创建了一个jsFiddle:小提琴

Any help will be highly appreciated.

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

1 个解决方案

#1

You want to have a wrapper that will put your "body" div absolutely at the bottom of your carousel like in this fiddle :

你想要一个包装器,将你的“身体”div绝对放在旋转木马的底部,就像这个小提琴一样:

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

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

#1

You want to have a wrapper that will put your "body" div absolutely at the bottom of your carousel like in this fiddle :

你想要一个包装器,将你的“身体”div绝对放在旋转木马的底部,就像这个小提琴一样:

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

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

标签：

相关文章