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

Question

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

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

大型设备的轮播位于 id 为“carousel”的 div 中，因此我尝试像这样在小型/移动设备上隐藏带有大图像的轮播：

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

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

Answer 1

使用引导程序，您可以根据屏幕大小进行隐藏。 On this page，转到响应式实用程序部分。你会看到像“.hidden-xs”或“.hidden-lg”这样的东西。您将必须创建多个轮播 - 一个用于移动设备，一个用于平板电脑，一个用于桌面。但这可能就是您想要的。