작은 화면 크기에서 <body>의 위쪽 여백을 제거하십시오. - 부트 스트랩 4

나는 내가 옳은지 확실하지 않습니다. Bootstrap 4를 사용하여 웹 페이지를 만들었습니다. 많은 조정을 한 후에 모든 페이지 요소가 예상대로 렌더링됩니다. 그러나 작은 화면에서는 position: absolute을 사용하여 <body>에 top-margin이있어 일부 요소를 푸시하는 것처럼 보입니다. CSS 파일을 살펴 보았지만 그런 코드는 발견되지 않았습니다. 그것은 내 코드에서 마지막으로 남은 비트입니다.작은 화면 크기에서 <body>의 위쪽 여백을 제거하십시오. - 부트 스트랩 4

내 바이올린은 :http://jsfiddle.net/chandannadig/3kjdo9rr/10/

더 나은 이해를위한 스크린 샷에서 참조하시기 바랍니다. 내 Google 크롬 개발자 도구의 <body>에 마우스 포인터를 올려 놓았습니다.

대형 화면

작은 화면 (아이폰 6S 세로)

출처

2016-07-11 Chandan D Nadig

데모 밤은 '확실히 당신이 보여 무엇을하지만 차이가있다. 여백이있는 요소와 클래스 .pad입니다. 4rem 1.5rem 1rem 1.5rem; 여백으로 변경하면 : 3rem 1.5rem 1rem 1.5rem; 틈새가 닫힙니다.

출처

2016-07-11 15:58:17

그게 작동합니다. 감사. 하지만 그것은 내 목적을 달성하지 못합니다. 나는 그 질문에 언급하지 않아서 미안하다. .pad에 대한 여백을 원하지만 .clip :: after와 .clip :: before를 스크린 샷 1에 표시된대로 밀어 넣으십시오. –

이 차이는 .pad 클래스의 위쪽 여백으로 인해 발생합니다. 그래서 다음과 같이 변경하십시오 :

@media screen and (max-width: 768px) { 
.pad { 
    margin: 0 1.5rem 1rem 1.5rem; 

}

출처

2016-07-11 16:05:50 rkubo

Glenn Packer의 대답에 대한 저의 코멘트를 참조하십시오. 나는 정확한 디자인을 유지하려고 노력하고있다. –

작은 화면 크기에서 <body>의 위쪽 여백을 제거하십시오. - 부트 스트랩 4

답변

관련 문제