如何使用 3 种不同的设置为平板电脑、移动设备和更广泛的设备更改 bootstrap 轮播？

Question

我在我的网站上构建了一个 bootstrap 轮播（全屏介绍），它在大型设备上完美运行，但在移动设备上它只显示轮播图像的左三分之一，但我希望它是图像的中心。 所以我认为一个好的解决方案是为大型设备、平板电脑和移动设备使用不同版本的图像进行 3 种不同的设置，以确保它具有我想要的焦点。这应该通过隐藏所有其他轮播设置来工作，但例如用于移动设备的轮播设置（如果它在小型设备上）。如果它在 pc 上隐藏了除大型设备之外的所有设备，...等等

我不想在移动设备上的轮播中添加内容，我想更改轮播滑块图像（但仅当使用移动设备时）。

大型设备的旋转木马位于 div 中，id 为 "carousel" 所以我尝试这样在 small/mobile 设备上隐藏带有大图像的旋转木马：

@media (max-width:800px) {
    #carousel {
        display:none !important;
    }
} 

虽然对我不起作用。也许有人可以帮助我！将不胜感激，谢谢！ :3

Answer 1

使用 bootstrap，您可以根据屏幕大小隐藏。 On this page，转到有关响应实用程序的部分。您会看到类似“.hidden-xs”或“.hidden-lg”的内容。您将不得不创建多个轮播 - 一个用于移动设备，一个用于平板电脑，一个用于桌面。但这可能就是您要找的。