Question

为了更好地理解我正在更新整个问题。

我正在使用bootstrap 3和轮播组件，但是，轮播中的一个页面包含一个需要定位在section标签底部的图像，而不会调整容器的大小。

以下是我正在使用的代码：

<section id="header-slider" class="section carousel slide" data-ride="carousel" style="padding-bottom: 0;">
                <!-- Start Slider Navigation -->
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#header-slider"></li>
                    <li data-slide-to="1" data-target="#header-slider" class=""></li>
                </ol>
                <!-- End Slider Navigation -->
                <div class="carousel-inner">
                    <div class="item row active">
                        <div class="col-xs-5 hidden-sm">
                            <img src="..." style="margin-top: -40px">
                        </div>
                        <div class="col-xs-7">
                            <h1>...</h1>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="item row">
                        <div class="col-xs-8">
                            <h1>...</h1>
                            <p>...</p>
                        </div>
                    </div>

                </div>
            </section>

以下是包含问题的正在运行的页面：www.remotepark.com.br

您可能会看到转换到carousel组件上的第二页后，它会调整大小。

如何解决这个问题，保持页面高度相等（实际上所有页面的高度都必须与第2页相同）？

Answer 1

不确定我是否完全理解.. 但也许试一试，看看它是否能实现你的目标。

<div style="width: 400px; height: 250px; position: relative;">
  <div style="width: 400px; height: 150px">
    <img src="..." style="width: 200px; height: 200px; position: absolute; bottom: 0;" />
  </div>
</div>

Answer 2

尝试从

更改style.css

.carousel .item {
    padding-top: 50px;
    height: 300px;
}

为：

.carousel .item {
    height: 290px; /* the image height */
}

也删除：来自第一个轮播项目中图片的style="margin-top: -40px"

图像位于容器div限制之上

2 个答案: