부트스트랩 랜딩 페이지 레이아웃 문제 - 컨테이너가 화면 크기에 올바르게 맞지 않습니다.

Question

현재 부트스트랩을 사용해 랜딩페이지를 만드는 연습을 하고 있습니다. 그러나 레이아웃 문제가 발생하여 컨테이너가 적절한 화면 크기에 맞지 않습니다. 좌우 균형이 맞지 않아 화면이 왼쪽으로 기울어지는 현상이 발생합니다.

다음은 문제를 보여주는 스크린샷(링크)입니다: 텍스트

다양한 방법을 시도했지만 문제가 해결되지 않았습니다. 이것이 Bootstrap의 그리드 시스템이나 컨테이너 설정에 문제가 있는 것 같습니다.

이 레이아웃 문제를 해결하는 방법을 안내해 줄 수 있는 사람이 있나요? 어떤 제안이나 통찰력이라도 대단히 감사하겠습니다.

또한 다음은 관련 코드 조각입니다.

으아악

컨테이너 구문, 여백, 패딩도 확인했습니다. 근데 이게 뭐가 문제인지 정말 이해가 안가네요..

정말 감사합니다. 초보자인 저에게 많은 도움이 됩니다.

미리 감사드립니다! !

Answer 1

컨테이너의 위치를 ​​확인하세요. 코드 조각에서는 col-xxl-8 클래스와 함께 컨테이너 클래스를 사용합니다. 컨테이너가 중앙에 배치하려는 전체 콘텐츠를 래핑하고 col-xxl-8 클래스가 올바르게 적용되었는지 확인하세요.

그리고 이렇게 기능 섹션의 모든 컨테이너 클래스를 확인해야 한다고 생각하세요

col-12 col-sm-8 col-lg-6 用于图像容器，col-lg-6 텍스트 컨테이너용.

Answer 2

가로 스크롤 막대가 나타나는 이유는 기능이 부분적으로 본문을 100% 이상 오버플로하기 때문입니다. Bootstrap 클래스를 추가하세요 mw-100，相当于在CSS中设置max-width: 100%;.

아래 코드 조각을 참조하세요.

으아악