2017-10-20 2 views
0

J'ai une erreur étrange avec Bootstrap 3, essentiellement en réduisant la largeur de mon navigateur à la moitié de l'écran, il y a un petit seuil de 1px dans lequel les éléments hidden-xs et hidden-sm apparaître sur l'écran. Est-il possible de rectifier cela en ayant l'un des éléments hidden-xs ou hidden-hidden cachés plutôt que les deux affichés?Bootstrap 3 éléments cachés sur la moitié de la largeur d'écran

J'ai testé sur l'exemple du site de bootstrap trouvé ici http://bootstrapdocs.com/v3.0.3/docs/css/ sous classes d'aide> montrer et masquer le contenu

Here is bootstrap's website example on half screen

Une fois la largeur de l'écran est réduite par une petite quantité d'être demi-largeur, ce qui suit est show (désolé je ne pouvais que poster un lien): ✔ Caché sur x-small (Vert) Moyen (Grey out) ✔ Caché sur x petit et petit (vert) ✔ Caché sur x-small et moyen (Vert) ✔ Caché sur x-petit et grand (vert)

<div class='col-xs-12'><div class='hidden-xs'>This content should be hidden on mobile only, but visible on everything else</div><div class='hidden-sm hidden-md hidden-lg'>This content should be hidden on everything apart from xs devices</div></div> 

Cependant, lorsque le navigateur est réduit à la largeur de la moitié de l'écran, à la fois l'élément caché-xs et le sm caché,-md caché élément caché-atterrisseur reste à l'écran jusqu'à ce que la largeur est soit réduite ou augmentée . (Comme s'il y avait un écart dans la largeur requise pour être un élément xs ou sm)

+2

Vous pouvez ajouter une partie de votre code ici dans un extrait. IT va montrer votre problème et il sera plus facile d'obtenir de l'aide des utilisateurs SO;) Bienvenue –

+0

Salut, bravo. Je n'ai pas senti qu'il était nécessaire d'ajouter du code puisque j'ai trouvé que c'était un vrai problème avec Bootstrap lui-même plutôt que ce que j'ai codé, je vais rapidement attacher un exemple du genre de problème que je suis orienté vers. – ojbx

+0

Après avoir testé et recherché un peu plus ... J'ai trouvé cette question ici: https://stackoverflow.com/questions/42180675/bootstrap-layout-media-queries-not-working-at-767px-on-chrome, ceci est exactement la même erreur, mais j'ai essayé les solutions (réorganiser les requêtes des médias, l'essayer sur des sites Web en direct, etc.) mais j'ai malheureusement encore obtenu n'importe où, a-t-on des suggestions? – ojbx

Répondre

0

Après avoir déconné pendant un moment, j'ai découvert une solution, mais d'abord, une meilleure explication du problème est nécessaire.

Ce problème se produit exclusivement à la largeur maximale exacte de chaque classe de taille d'élément, par ex. xs, sm, etc. dans Google Chrome uniquement. Les développeurs Bootstrap sont conscients de ce problème, mais pour une raison quelconque, ils ne sont pas prêts à agir.

Si vous souhaitez que les éléments hidden-xs et hidden-sm ne soient pas affichés en même temps, vous devez modifier la largeur maximale de la requête de média de chaque classe masquée pour avoir plus de précision, par ex. hidden-xs, hidden-sm etc. pour être max-width: * .99;

J'ai fourni un exemple ci-dessous:

@media only screen and (max-width: 767.99px) { 
    .hidden-xs { 
     display: none; 
    } 
} 

@media only screen and (min-width: 768px) and (max-width: 991.99px) { 
    .hidden-sm { 
     display: none; 
    } 
} 

@media only screen and (min-width: 992px) and (max-width: 1199.99px) { 
    .hidden-md { 
     display: none; 
    } 
} 

@media only screen and (min-width: 1200px) { 
    .hidden-lg { 
     display: none; 
    } 
}