How to alter bootstrap carousel for tablet, mobile and wider device with 3 different setups?

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/46980773/how-to-alter-bootstrap-carousel-for-tablet-mobile-and-wider-device-with-3-diffe