Problèmes de mise en page avec Bootstrap
J'utilise Bootstrap 3.3.4, cette page rend bien dans un navigateur de bureau:
Mais lorsque je regarde sur un appareil mobile, les 4 produits sont regroupés. J'ai essayé de le déboguer mais je ne vois absolument rien qui cloche. Des idées?
J'ai trouvé le problème, cela était lié au fait qu'un style min-height était uniquement attribué à l'écran @media uniquement et (min-width: 1224px)
Généralement, une bonne option serait d’ajouter une classe personnalisée à vos modules et à tout contenu que vous jugerez nécessaire pour définir des points de rupture.
J'aime "col-sm-12 col-md-6 col-lg-4"
(ces trois éléments iraient ensemble dans votre classe personnalisée pour dicter les points d'arrêt) ou bien, peu importe la façon dont vous décidez de dicter vos points d'arrêt, vous éviterez ainsi d'écrire des requêtes de support supplémentaires ou d'ajuster celles existantes.
Dans cet exemple, votre élément commence par la largeur du mobile, puis par la moitié de la largeur de la tablette, puis par les grands écrans 1/3 de largeur.
Deux fichiers ont une double barre oblique
<link rel="stylesheet" href="//media/jui/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="//media/jui/css/bootstrap-responsive.css" type="text/css" />
Ces deux peuvent ne pas charger correctement.