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

Question

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

我不想在移动设备上向旋转木马添加内容，我想更改旋转木马滑块图像（但仅限于使用移动设备时）。

大型设备的旋转木马位于ID为“carousel”的div中，所以我尝试这样做，例如在小型/移动设备上隐藏带有大图像的旋转木马：

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

虽然对我不起作用。也许有人可以帮助我！非常感谢，谢谢！ ：3

Answer 1

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