최근 프로젝트 프론트 데스크는 bootstrap.css + angularjs를 사용하며 배경은 데이터 만 프로세스 만 사용합니다 (PHP를 사용하여 처리 결과는 직접 json_encode ($ ARR)입니다. Chrome의 시뮬레이션 기계 테스트는 완벽했으며 실제 기계 테스트는 없습니다. 그것을 완료 한 후, 나는 전화로 테스트 할 때 기절했다. 페이지를 왼쪽과 오른쪽으로 스 와이프하면 빈 세로 막대가 나타났습니다 (아래 그림과 같이). 마진 오른쪽에 의해 설정된 길이 때문이라고 결정됩니다. CSS를 확인하면 관련 코드가 없습니다. 부트 스트랩에서 문제가 발생하는 것 같습니다. 그것은 프로그램의 사용에 영향을 미치지 않지만 매우 어색하며 고쳐야합니다.
페이지를 확인하고 그리드 시스템을 사용하는 페이지가 사용되는 경우에만이 문제가 발생하는지 확인하십시오. .row 관련 CSS를 확인하고 마진 정의가 다음과 같습니다.
.row {마진-왼쪽 : -15px; 마진 오른쪽 : -15px;}.ROW는 일반적으로 컨테이너의 하부 요소 및 .col-xx-xx의 상단 요소로 사용됩니다. 그건 그렇고, .Container 및 Con-XX-XX의 CSS를 확인하십시오.
.Container {Padding-Left : 15px; Padding-Right : 15px;}. Col-XX-XX {Padding-left : 15px; Padding-Right : 15px;}.Container의 모든 요소의 내부 마진은 15px 거리를 가지며 매우 아름답게 보이며 .col-xx-xx의 내부 마진도 15px를 설정합니다. 이것은 .contariner (.col-xx-xx와 .container 사이의 거리가 30px)의 요소와 정렬되지 않으므로 첫 번째 래스터 요소 요소와 마지막 래스터 요소는 각각 {padding-left : 0px;} 및 {padding-right : 0px;}로 설정해야합니다. 이렇게하면 정렬 문제가 해결되지만 설정 후 각 그리드의 너비는 동일하지만 표시된 컨텐츠의 너비는 15px입니다. 따라서 FB의 천재는 부정적인 외부 경계의 해결책을 영리하게 채택했습니다. 코드 구현은 간단했을뿐만 아니라 각 래스터에 표시된 컨텐츠의 일관되지 않은 폭에 문제가 없었습니다.
음의 외부 경계의 솔루션은 양호하지만 작은 스크린 (모바일 단자)에서 빈 경계를 유발할 것입니다 (이 기사에서는 통증이 해결됩니다). 부트 스트랩을 사용자 정의하면이 문제가 해결되지만 너무 번거 롭습니다. 가장 쉬운 방법은 관련 CSS를 다시 작성하는 것입니다.
/* 전화 필요* //* iPhone for iPhone for bootstrap.css 이후 시작 */. row {margin : 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-. 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 {}/*. iPhone에 대한 15px fuck */그리드에는 패딩이없고 각 울타리의 폭이 동일하며 표시된 콘텐츠의 너비도 동일하며 컨테이너의 요소와 정렬 될 수 있기 때문에 성공적으로 해결되었습니다 (참고 :이 결과는 매우 심각합니다. 각 그리드 사이의 내용은 연결되어 있으며 내부 마진을 재정의하여 내부 그리드를 해결할 수 있습니다.
위는 Bootstrap.css가 휴대폰에서 스 와이프 될 때 오른쪽의 빈 공간에 대한 이유와 솔루션입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!