如何修改Bootstrap轮播组件以适应平板电脑、移动设备和更宽的屏幕，使用3种不同的设置？

Question

如何修改Bootstrap轮播组件以适应平板电脑、移动设备和更宽的屏幕，使用3种不同的设置？

htmlcsstabletmobile-devicesbootstrap-carousel

3

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

我不想在移动设备上添加任何东西到轮播中，我想改变轮播滑块图像（但仅当使用移动设备时）。

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

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

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

- Upendo

可能是如何让Bootstrap轮播使用手机左/右滑动的重复问题。 - WMomesso

好的，但我不想在移动设备上添加任何内容到轮播图中，我只想更改轮播图幻灯片图片（但仅在使用移动设备时）。 - Upendo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harley · Accepted Answer

使用Bootstrap，您可以根据屏幕大小隐藏内容。在此页面上，转到响应式实用程序部分。您会看到像".hidden-xs"或".hidden-lg"这样的东西。您需要创建多个走马灯 - 一个用于移动设备，一个用于平板电脑，一个用于桌面电脑。但这可能是您需要的。