Question

我的网页上有一个bootstrap轮播。它包含两张幻灯片。

第一个有文字和图形内容，当用户水平缩小网页时，我的图像消失了（这是我故意添加hidden-xs）。

第二个包含文本和表单，当用户缩小网页时，我不想隐藏任何这些元素（而是将其保留在另一个元素之下）。

问题是，当网页缩小时，轮播的第一张幻灯片只包含一个元素（文本），第二张幻灯片包含两个元素（文本和另一个元素下的一个元素）。所以我的问题是 - 如何调整旋转木马的高度，以便在显示第一张幻灯片时，将旋转木马的高度调整为文本内容，当显示第二张幻灯片时，调整高度以显示文本和形成？

这是我的旋转木马的html代码：

<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators carousel-indicators-orange">
        <li data-target="#myCarousel" id="regularCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" id="businessCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item itemRegular active" id="regular">
            <div class="parallax"> 
            <div class= "container">
                <div class="row">
                    <div class="col-md-7">
                        <div class="description">  
                            <h5>Some longer text....</h5>
                        </div>       
                    </div>
                    <div class="col-md-5  hidden-xs">
                        <div class="parallax-image" >
                            <img class="phone" src="img/template/image.png">
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        </div>
        <div class="item itemCompany" id="business">
            <div class="parallax">
            <div class= "container">
                <div class="row">
                    <div class="col-sm-7 company">
                        <h2>title</h2>
                        <div class="secondDescription" >
                           <h5>some longer text</h5>
                        </div>
                    </div>
                    <div class="col-sm-5 form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Form title</h3>
                                <p>Fill in the form below:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-pencil"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" method="post" class="registration-form" id="subscribeBusiness">
                                <div class="form-group">
                                    <input type="text" name="form-first-name" placeholder="name..." class="form-first-name form-control" id="form-first-name" name="name" required>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="form-last-name" placeholder="last name..." class="form-last-name form-control" id="form-last-name" name="last_name" required>
                                </div>
                                <button type="submit" class="btn btn-fill btn-info pull-left">Sign up</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
            </div> 
        </div>    
    </div>
</header>

我尝试使用移动查询，但在我看来，解决方案似乎是一种解决方法，而不是典型的负责任网页设计方法。至于现在，我开发了一个解决方案，对于窗口的每个尺寸我都要调整div .itemCompany的高度。

例如，我正在做：

@media (max-width: 378px) {
    .itemCompany{
        height:1470px;
     }
}

@media (max-width: 435px) {
     .itemCompany{
        height:1350px;
     }
}

等等，许多移动条件取决于每个页面宽度。

有没有比使用移动查询更好的方法呢？

当用户缩小网页时，如何调整自举轮播幻灯片的高度？

0 个答案: