web-dev-qa-db-fra.com

Bootstrap 3 Appliquer CSS sur Mobile View uniquement

J'utilise Bootstrap 3, dans la vue mobile, je voudrais appliquer du CSS pour corriger quelques bugs sur la vue mobile. J'ai regardé les documentations et Google. Je suis capable de le faire) t semble trouver aucun indice à ce sujet.

C'est possible?

csstwitter-bootstrapresponsive-design
32
Navneil Naicker

Utilisez simplement les requêtes média appropriées dans votre CSS, par exemple

@media (max-width: 767px) {
    /* CSS goes here */
}

Bootstrap définit les largeurs suivantes

  • Petits appareils supplémentaires (téléphones, moins de 768 pixels)
  • Petits appareils (tablettes, 768 pixels et plus)
  • Appareils moyens (ordinateurs de bureau, 992px et plus)
  • Grands appareils (grands ordinateurs de bureau, 1 200 pixels et plus)

Voir http://css-tricks.com/css-media-queries/ pour plus d'informations sur les requêtes média.

69
Phil

Il existe également des utilitaires réactifs, vous pouvez ajouter des classes à certains éléments pour les afficher ou les masquer à certaines tailles de fenêtre.

.hidden-xs or .visible-xs

http://getbootstrap.com/css/#responsive-utilities

16
unclejam

Vous pouvez utiliser des classes d'affichage réactives https://getbootstrap.com/docs/4.3/utilities/display/ in Bootstrap 4

Ainsi, par exemple, vous souhaitez masquer un élément spécifique uniquement pour les téléphones (en mode portrait et paysage ou en xs et sm), vous pouvez le faire

<div class="big_image d-none d-md-block">
</div>

Ce qu'il fait est défini display:none par défaut et le rend visible uniquement à partir de md et au-dessus.

3
RameshVel