Uma recepção recente da recepção usa o bootstrap.css + angularjs, e o plano de fundo apenas processa dados (usando PHP, o resultado do processamento é diretamente JSON_ENCODE ($ ARR), o que é muito legal). Os testes da máquina de simulação no Chrome foram perfeitos e não há teste de máquina real. Depois de concluí -lo, fiquei surpreso quando estava testando no telefone. Quando deslizei a página para a esquerda e para a direita, uma barra vertical em branco apareceu (como mostrado na figura abaixo). É determinado que é devido ao comprimento definido pela margem-direita. Verifique o CSS e não há código relevante. Parece que o problema ocorre no bootstrap. Embora não afete o uso do programa, ele parece muito estranho e você deve corrigi -lo.
Verifique a página e consulte que esse problema ocorrerá apenas se a página usando o sistema de grade for usada. Verifique o. CSS relacionado a.
.row {margem-esquerda: -15px; margem-direita: -15px;}.row é geralmente usado como o elemento inferior do recipiente e como o elemento superior de .col-xx-xx. A propósito, confira o CSS de .Container e CON-XX-XX:
.Container {Padding-Left: 15px; Padding-Right: 15px;}. col-xx-xx {preenchimento-left: 15px; preenchimento: 15px;}As margens internas de todos os elementos do .Container têm uma distância de 15px, que parece muito bonita, e as margens internas do .col-xx-xx também define 15px. Isso não será alinhado com os elementos do .Contariner (a distância entre .col-xx-xx e .container é 30px); portanto, o primeiro elemento raster e o último elemento raster precisam ser definidos como {Padding-left: 0px;} e {encadeamento: 0px;} respectivamente. Isso resolve o problema de alinhamento, mas após a configuração, embora a largura de cada grade seja a mesma, a largura do conteúdo exibido é de 15px. Assim, os gênios do FB adotaram inteligentemente a solução de bordas externas negativas. A implementação do código não apenas foi simples, mas não houve problema de largura inconsistente do conteúdo exibido em cada raster.
Embora a solução de bordas externas negativas seja boa, isso causará bordas em branco em telas pequenas (terminais móveis) (o ponto de dor a ser resolvido neste artigo). A personalização do bootstrap resolve esse problema, mas é muito problemático. A maneira mais fácil é reescrever o CSS relevante.
/* Precisa ligar para* //* foda -se 15px para iPhone Start After Bootstrap.css */. Linha {margin: 0;}. collg-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-4, .col-lg-5, .col-lg-6, .col-lg-4,. .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- 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-6, .col-xs-7, .col-xs-8, .col-xs-6, .col-xs-7, .col-xs-8,. Foda -se 15px para iPhone sobre */Foi resolvido com sucesso porque a grade não tem preenchimento, a largura de cada cerca é a mesma, a largura do conteúdo exibida também é a mesma e pode ser alinhada com os elementos do contêiner (Nota: essa conseqüência também é muito grave, o conteúdo entre cada grade está conectado e a grade interna pode ser resolvida pela redefinência da área de entrada e, e a grade interna.
O exposto acima são os motivos e soluções para o espaço em branco à direita quando o bootstrap.css é deslizado no telefone celular. Espero que seja útil para todos!