web-dev-qa-db-fra.com

Bootstrap vue colonne en mode portrait et paysage

Je suis assez nouveau dans le bootstrap et je voulais demander, y a-t-il quand même que lorsque l'écran de l'appareil est en Portrait pour toujours utiliser les colonnes de taille "md", et quand il est en paysage pour toujours utiliser les colonnes "xs"?

csstwitter-bootstrapresponsive-designmedia-queries
19
meztli

Étendre Bootstrap CSS en utilisant des requêtes multimédias nouvelles ou modifiées. Normalement, laisser le fichier bootstrap.css d'origine et l'étendre avec les modifications est le meilleur moyen, ou les futures mises à niveau seront gênantes. Vous ne voudrez peut-être que recréez les classes de grille que vous souhaitez utiliser, par exemple:

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

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

Comme mentionné par Skelly, il n'y a pas de commutateur d'orientation intégré dans Bootstrap lui-même pour le moment.

21
jtheman

Voici ma solution actuelle, peut-être aide quelqu'un

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

Deux solutions:

1- consiste à ajouter la classe "portrait" à n'importe quel div que vous voulez voir dans portrait avec une largeur = 100%.

2- Décommentez et utilisez la deuxième règle sur le support qui applique la largeur: 100% à tout div qui a un nom de classe qui commence la largeur col-xs

2
Leonardo Cabré

Pour autant que je sache, il n'y a aucun moyen de le faire "prêt à l'emploi" .. Bootstrap utilise des requêtes multimédias basées sur la largeur de l'écran et non sur l'orientation.

1
Zim