我在我的网站上构建了一个 Bootstrap 轮播(全屏介绍)，它在大型设备上完美运行，但在移动设备上它只显示轮播图像的左三分之一，但我希望它是图像的中心。 所以我认为一个好的解决方案是为大型设备、平板电脑和移动设备使用不同版本的图像进行 3 种不同的设置，以确保它具有我想要的焦点。这应该通过隐藏所有其他轮播设置来工作，但例如用于移动设备的轮播设置(如果它在小型设备上)。如果它在 pc 上隐藏了除大型设备以外的所有设备，...等等。
我不想在移动设备上向轮播添加内容，我想更改轮播 slider 图像(但仅当使用移动设备时)。
大型设备的旋转木马位于 ID 为“carousel”的 div 中，因此我尝试这样在小型/移动设备上隐藏带有大图像的旋转木马:
@media (max-width:800px) {
#carousel {
display:none !important;
}
}
虽然对我不起作用。也许有人可以帮助我!将不胜感激，谢谢! :3
最佳答案
使用 Bootstrap ，您可以根据屏幕大小进行隐藏。 On this page ，转到有关响应实用程序的部分。您会看到类似“.hidden-xs”或“.hidden-lg”的内容。您将不得不创建多个轮播 - 一个用于移动设备，一个用于平板电脑，一个用于桌面。但这可能正是您要寻找的。
关于html - 如何使用 3 种不同的设置更改平板电脑、移动设备和更广泛设备的引导轮播？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46980773/