Un proyecto reciente de la recepción utiliza bootstrap.css + angularjs, y el solo fondo procesa datos (usando PHP, el resultado de procesamiento es directamente json_encode ($ arr), lo cual es muy bueno). Las pruebas de la máquina de simulación en Chrome han sido perfectas, y no hay una prueba de máquina real. Después de completarlo, me sorprendió cuando estaba probando por teléfono. Cuando deslicé la página izquierda y derecha, apareció una barra vertical en blanco (como se muestra en la figura a continuación). Se determina que se debe a la longitud establecida por el margen-derecha. Verifique CSS y no hay código relevante. Parece que el problema ocurre en Bootstrap. Aunque no afecta el uso del programa, se siente muy incómodo y debe arreglarlo.
Verifique la página y descubra que este problema ocurrirá solo si se usa la página que usa el sistema de cuadrícula. Verifique el CSS relacionado con .ROW y encuentre que su definición de margen es la siguiente:
.row {margen-izquierda: -15px; margen-derecha: -15px;}.Row se usa generalmente como el elemento inferior del contenedor y como el elemento superior de .col-xx-xx. Por cierto, consulte el CSS de .Container y Con-XX-XX:
.Container {Padding-Left: 15px; Padding-Right: 15px;}. Col-XX-XX {Padding-Left: 15px; Padding-derecha: 15px;}Los márgenes internos de todos los elementos de .Container tienen una distancia de 15px, que se ve muy hermosa, y los márgenes internos de .Col-XX-XX también establecen 15px. Esto no se alineará con los elementos del .contariner (la distancia entre .col-xx-xx y .container es 30px), por lo que el primer elemento de trama y el último elemento de trama deben establecerse en {padding-left: 0px;} y {remo-right: 0px;} respectivamente. Esto resuelve el problema de alineación, pero después de la configuración, aunque el ancho de cada cuadrícula es el mismo, el ancho del contenido mostrado es 15px. Entonces, los genios de FB adoptaron inteligentemente la solución de bordes exteriores negativos. La implementación del código no solo fue simple, sino que no había ningún problema de ancho inconsistente del contenido que se muestra en cada ráster.
Aunque la solución de los bordes externos negativos es buena, causará bordes en blanco en pantallas pequeñas (terminales móviles) (el punto de dolor se resolverá en este artículo). Personalizar Bootstrap resuelve este problema, pero es demasiado problemático. La forma más fácil es reescribir el CSS relevante.
/* Necesita llamar* //* joder 15px para iPhone inicio después de bootstrap.css */. fila {margen: 0;}. col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .Col-Lg-9, .Col-Md-1, .Col-Md-10, .Col-Md-11, .Col-Md-12, .Col-Md-2, .Col-Md-3, .Col-Md-4, .Col-Md-5, .Col-Md-6, .Col-Md-7, .Col-Md-8, .Col-Md-- 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-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, .COL-XS-9 {Padding: 0; Fuck 15px para iPhone Over */Se resolvió con éxito porque la cuadrícula no tiene relleno, el ancho de cada cerca es el mismo, el ancho del contenido mostrado también es el mismo, y se puede alinear con los elementos del contenedor (nota: esta consecuencia también es muy grave, es decir, el contenido entre cada cuadrícula está conectado, y la cuadrícula interna puede resolverse redefiniendo el margen interno y el centrado del contenido).
Lo anterior son las razones y soluciones para el espacio en blanco a la derecha cuando bootstrap.css se desliza en el teléfono móvil. ¡Espero que sea útil para todos!