如何通过3种不同的设置更改用于平板电脑，移动设备和更广泛设备的引导轮播? [英] How to alter bootstrap carousel for tablet, mobile and wider device with 3 different setups?

问题描述

我在我的网站上建立了一个引导轮播(全屏介绍)，它在大型设备上可以正常使用，但是在移动设备上，它仅显示轮播图像的左三分之一，但我希望它成为图像的中心.因此，我认为一个好的解决方案是为大型设备，平板电脑和移动设备使用不同版本的图像进行3种不同的设置，以确保其具有我想要的焦点.这应该通过隐藏所有其他轮播设置来解决，但例如用于移动设备(如果在小型设备上).如果它在PC上隐藏了大设备以外的所有内容，...等等.

我不想在移动设备上的轮播中添加某些内容，我想更改轮播滑块图像(但仅在使用移动设备时).

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

  @media(最大宽度:800像素){#carousel {显示:无！重要；}} 

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

解决方案

使用引导程序，您可以根据屏幕大小进行隐藏.在此页面上，转到响应实用程序"部分.您会看到类似".hidden-xs"或".hidden-lg"的内容.您将必须创建多个轮播-一个用于移动设备，一个用于平板电脑，一个用于台式机.但这可能就是您要寻找的.

I have built a bootstrap carousel (full screne intro) on my website which works perfectly on big devices but on mobile device it shows only the left third of the carousel image but I would like it to be the center of the image. So I think a good solution would be to make 3 different setups for big devices, tablet and mobile with different versions of the image to make sure it has the focus I want. That should work through hiding all other carousel setups but for instance that one for mobile (if its on small device). if its on pc hide all but that one for big device,...etc.

I don't want to add something to the carousel on mobile device, I want to change the carousel slider image (but only when mobile device is used).

The carousel for big devices is in a div with id "carousel" so I tried like this for instance to hide carousel with big image on small/mobile devices:

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

Doesn't work for me though. Maybe someone can help me! Would be very grateful, thanks! :3

解决方案

With bootstrap, you have the ability to hide depending on screen size. On this page, go to the section on Responsive Utilities. You'll see things like ".hidden-xs" or ".hidden-lg". You would have to create multiple carousels - one for mobile, one for tablet, one for desktop. But that might be what you're looking for.

这篇关于如何通过3种不同的设置更改用于平板电脑，移动设备和更广泛设备的引导轮播?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！