Vue de la colonne Bootstrap en mode portrait et paysage

Je suis failry nouveau à bootsrap et je voulais demander, est-il de toute façon, que lorsque l'écran de l'appareil est en mode Portrait de toujours utiliser le "rapport" de la taille des colonnes, et quand il est dans le paysage de toujours utiliser "xs" colonnes?

source d'informationauteur meztli

  1. 17

    Étendre Bootstrap CSS à l'aide de nouvelles ou modifiées, des media queries. Normalement en laissant l'original de bootstrap.fichier css et en l'étendant à l'changements est le meilleur moyen, ou de futures mises à jour seront gênants. Vous pourriez seulement vouloir recréer une grille de classes 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 d'orientation interrupteur intégré dans Bootstrap lui-même en ce moment.

  2. 1

    Autant que je sache, il n'y a pas de façon de faire "hors de la boîte".. Bootstrap utilise les media queries qui sont basés sur la largeur de l'écran, pas d'orientation.

  3. 1

    Voici ma solution réelle, peut-être aider quelqu'un à

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

    Deux solutions:

    1 - est d'ajouter un "portrait" de la classe à toutes les div que vous voulez voir dans le portrait avec une largeur de 100%.

    2 - retirer le commentaire et l'utilisation de la deuxième règle sur les médias qui s'applique width:100% à tout élément div qui ont un nom de classe qui commence largeur de col-xs