Question

我正在使用bootstrap carousel进行图像幻灯片放映。我想在ipad上查看时隐藏某些图像。但是，当我使用.hidden-sm时，它会隐藏图像，但会产生白色空白。如何隐藏图像，没有空格？我尝试过使用id然后对那个id标签执行display：none，但它也不起作用。

同样使用hidden-sm，覆盖“活动”，它成为第一个在转盘上看到的图像。

感谢。

HTML：

<div class="carousel-inner">

            <div class="item active">
                <img src="./img/image_00.jpg" alt="" />
            </div>

            <div class="item hidden-sm">
                <img src="./img/image_01.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_02.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_03.jpg" alt="" />
            </div>
</div>

CSS：

.hidden-sm{
    display:none;
}

Answer 1

你的问题是，即使项目被隐藏，它仍然是DOM的一部分，因此轮播将仍然显示空图像。有一些方法可以使用JavaScript从DOM中删除它，但如果您正在寻找仅限CSS的答案，最好的方法是使用2个单独的轮播。一个在平板电脑上显示，一个在每个其他屏幕尺寸上显示。

请注意，第一个旋转木马将仅显示在除平板电脑以外的所有屏幕上，因此它具有图像0,1,2,3。第二个旋转木马仅显示在平板电脑上并且具有图像0,2,3。图像1是完全消失所以它根本不会显示

<div class="carousel-inner hidden-sm">

            <div class="item active">
                <img src="./img/image_00.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_01.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_02.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_03.jpg" alt="" />
            </div>
</div>

<div class="carousel-inner visible-sm">

            <div class="item active">
                <img src="./img/image_00.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_02.jpg" alt="" />
            </div>

            <div class="item">
                <img src="./img/image_03.jpg" alt="" />
            </div>
</div>

希望这有帮助。

Bootstrap Carousel .hidden-sm导致空白

1 个答案: