我在尝试自定义移动设备上的轮播布局时遇到问题。
我希望它在移动设备上显示轮播的每一项,而不是只显示一项,但在尝试使用一些 CSS 和 JS 之后,尤其是使用 display float 或max-witdh 我刚刚开始认为这是不可能的,或者我不知道在哪里查看/查看错误的位置/属性。
我加入了两张图片,这样你们就可以看到我想要实现的目标。
我想要实现的目标:
我有什么:
示例 html 代码是非常基本的代码,我不包括 CSS,因为这只是出于设计目的。
<div id="solutions-carousel" class="carousel slide d-block d-md-none"> <div class="carousel-inner"> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-indicators"> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slide 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slide 3"></button> </div>
有什么想法吗?干杯(并对糟糕的英语表示歉意)。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号