Просмотр столбца Bootstrap в портретном и ландшафтном

Я неудачно разбираюсь в bootsrap и хочу спросить, есть ли в любом случае, когда экран устройства находится в Portrait, чтобы всегда использовать столбцы размера "md", а когда в ландшафте всегда использовать столбцы "xs"?

Ответ 1

Расширение CSS Bootstrap с использованием новых или измененных запросов к мультимедиа. Обычно оставить исходный файл bootstrap.css и расширить его с помощью изменений - это лучший способ, или будущие обновления будут неприятными. Вы можете только воссоздать классы сетки, которые хотите использовать, например:

@media (min-width: 992px) and (orientation:landscape) {
    .col-md-4 {
        // some properties
    }
}

@media (min-width: 992px) and (orientation:portrait) {
    .col-md-4 {
         // redefined
    }
}

Как уже упоминалось в Skelly, в данный момент в Bootstrap нет ориентировочного переключателя.

Ответ 2

Насколько я знаю, нет никакого способа сделать это "из коробки". Bootstrap использует медиа-запросы, основанные на ширине экрана, а не на ориентации.

Ответ 3

Вот мое фактическое решение, возможно, помогает кому-то

@media (orientation: portrait){
   .portrait{
       width: 100%;
   }
   /*div[class^='col-xs'], div[class*='col-xs']{
       width: 100%;
   }*/
}

Два решения:

1 - добавить класс "портрет" к любому div, который вы хотите видеть в портрете с шириной = 100%.

2- Раскомментируйте и используйте второе правило на носителе, который применяет ширину: 100% к любому div, у которого есть имя класса, которое начинает ширину col-xs