微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

是否可以在 md 和 sm 设备上设置不同的 bootstrap carousel-item 高度

如何解决是否可以在 md 和 sm 设备上设置不同的 bootstrap carousel-item 高度

我已经阅读并理解了另一篇文章,该文章展示了如何使引导轮播项目高度适应设备,但我想知道是否可以在中型设备和小型设备上为轮播项目设置高度。当我将高度设置为 350px 时;它在 mdsm 屏幕上维护。

<div id="info-carousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#info-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#info-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#info-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#info-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active bg-warning" style="height:350px">
            <div class="carousel-caption">
                <h5>Welcome</h5>
                <p>Tap on your assigned courses for course information</p>
            </div>
        </div>
        <div class="carousel-item bg-warning" style="height:350px">
            <div class="carousel-caption">
                <h5>System Menu</h5>
                <p>Tap on the menu bars <i class="fa fa-bars"></i> for menu items</p>
            </div>
        </div>
        <div class="carousel-item bg-warning" style="height:350px">
            <div class="carousel-caption">
                <h5>Appraisals of Courses</h5>
                <p>Tap on course tutors to begin your appraisals</p>
            </div>
        </div>
        <div class="carousel-item bg-warning" style="height:350px">
            <div class="carousel-caption">
                <h5>Expand Contents</h5>
                <p>Tap on the caret <i class="fa fa-chevron-down"></i> to see more contents</p>
            </div>
        </div>
    </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。