Un récent Reconderst Project utilise Bootstrap.CSS + AngularJS, et l'arrière-plan ne traite que les données (en utilisant PHP, le résultat de traitement est directement JSON_ENCODE ($ arr), ce qui est très cool). Les tests de machine de simulation sur Chrome ont été parfaits et il n'y a pas de véritable test de machine. Après l'avoir terminé, j'ai été stupéfait lorsque je testais au téléphone. Lorsque j'ai glissé la page à gauche et à droite, une barre verticale vierge est apparue (comme indiqué dans la figure ci-dessous). Il est déterminé qu'il est dû à la longueur définie par la marge droite. Vérifiez CSS et il n'y a pas de code pertinent. Il semble que le problème se produise dans Bootstrap. Bien que cela n'affecte pas l'utilisation du programme, il semble très gênant et vous devez le réparer.
Vérifiez la page et constatez que ce problème ne se produira que si la page à l'aide du système de grille est utilisée. Vérifiez le CSS lié à la. Et constatez que sa définition de marge est la suivante:
.Row {marge-left: -15px; marge-droite: -15px;}.Row est généralement utilisé comme l'élément inférieur du récipient et comme l'élément supérieur de .col-xx-xx. Soit dit en passant, consultez le CSS de .Container et CON-XX-XX:
.Container {padding-left: 15px; padding-right: 15px;}. Col-xx-xx {padding-left: 15px; padding-right: 15px;}Les marges intérieures de tous les éléments de .Container ont une distance de 15px, qui est très belle, et les marges intérieures de .col-xx-xx fixe également 15px. Cela ne sera pas aligné sur les éléments du .Contariner (la distance entre .col-xx-xx et .Container est de 30px), donc le premier élément raster et le dernier élément raster doivent être définis sur {padding-left: 0px;} et {padding-droit: 0px;} respectivement. Cela résout le problème d'alignement, mais après le réglage, bien que la largeur de chaque grille soit la même, la largeur du contenu affiché est de 15px. Ainsi, les génies de FB ont intelligemment adopté la solution des frontières extérieures négatives. Non seulement l'implémentation du code était simple, mais il n'y avait aucun problème de largeur incohérente du contenu affiché dans chaque raster.
Bien que la solution des bordures extérieures négatives soit bonne, elle provoquera des bordures vides sur de petits écrans (terminaux mobiles) (le point de douleur à résoudre dans cet article). La personnalisation de Bootstrap résout ce problème, mais c'est trop gênant. Le moyen le plus simple est de réécrire le CSS pertinent.
/ * Besoin d'appeler * // * baise 15px pour l'iPhone Démarrer après bootstrap.css * /. Row {margin: 0;}. Col-lg-1, .Col-LG-10, .Col-LG-11, .Col-LG-12, .Col-Lg-2, .Col-Lg-6, .Col-Lg-4, .Col-Lg-5,. .COL-LG-9, .COL-MD-1, .COL-MD-10, .COL-MD-11, .COL-MD-12, .COL-MD-2, .COL-MD-6, .COL-MD-4, .COL-MD-5, .COL-MD-6 9, .Col-Sm-1, .Col-SM-10, .Col-SM-11, .Col-SM-12, .Col-SM-2, .Col-SM-3, .Col-SM-4, .Col-Sm-5, .Col-Sm-6, .Col-Sm-7, .Col-Sm-8, .Col-Sm-9, .Col- XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7, .COL-XS-8,. Baise 15px pour iPhone sur * /Il a été résolu avec succès parce que la grille n'a pas de rembourrage, la largeur de chaque clôture est la même, la largeur du contenu affiché est également la même, et elle peut être alignée sur les éléments du conteneur (note: cette conséquence est également très grave, c'est-à-dire le contenu entre chaque grille est connecté, et la grille interne peut être résolue en redéfinissant la marge intérieure et en ce qui concerne le contenu).
Ce qui précède est les raisons et les solutions pour l'espace vide à droite lorsque Bootstrap.css est glissé sur le téléphone mobile. J'espère que ce sera utile à tous!