Bootstrap에서 오른쪽에 수수께끼 여백이 생겼을 때의 대처법

일어난 일

Bootstrap4를 사용하여 반응형 웹 페이지를 만들면 오른쪽에 수수께끼의 여백이 생겨 버렸다.

이미지처럼 오른쪽 가장자리에 틈이 생겨 쓸데없는 가로 스크롤이 발생합니다.
body의 width나 margin을 만나 보았지만 고치지 않았다.

해결 방법

body의 내용을 wrap하고 overflow:hidden;를 설정하면 고쳤다.

변경 전 HTML

sample.html

<!doctype html>
<html lang="ja">
  <head>
    ...（省略）...
  </head>
  <body>
    <h1>hello</h1>
    ...（省略）...
  </body>
</html>

변경 후 HTML

sample.html

<!doctype html>
<html lang="ja">
  <head>
    ...（省略）...
  </head>
  <body>
    <div id="wrap">
      <h1>hello</h1>
      ...（省略）...
    </div>
  </body>
</html>

body 바로 아래에 div를 추가하고 id "wrap"을 지정합니다.

변경 후 CSS

layout.css

#wrap {
  overflow: hidden;
}

CSS측에서는 id「wrap」에 대해 overflow: hidden;을 지정했다.

이것으로 수수께끼의 여백은 표시되지 않게 되었다.

참고

Reference

이 문제에 관하여(Bootstrap에서 오른쪽에 수수께끼 여백이 생겼을 때의 대처법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nekohara/items/e26640f2f4edf0c9acc4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다