부트스트랩 열이 XS 크기에서 올바르게 줄바꿈되지 않는 이유는 무엇입니까?

최소 크기(XS)의 Bootstrap 열 래핑

인기 있는 프런트 엔드 프레임워크인 Bootstrap은 개발자가 유연한 레이아웃을 만들 수 있도록 반응형 그리드 시스템을 제공합니다. 다양한 화면 크기에 맞게 조정하세요. 그러나 가장 작은 크기 중단점(XS)을 사용할 때 발생하는 일반적인 문제는 화면 너비가 특정 한도 이상으로 줄어들 때 열이 예상대로 줄 바꿈되지 않는다는 것입니다.

이 문제는 결합된 너비가 12인 열 때문에 발생합니다. (예:

< div class="col-xs-1">

)은 각 열의 패딩이 최소화되어 올바르게 래핑되지 않을 수 있습니다. Bootstrap의 .col-xs-1 열에는 15px의 패딩이 있으므로 좁은 화면에서 너무 일찍 줄 바꿈될 수 있습니다.

알려진 문제:

이 문제는 인정되었습니다. Bootstrap GitHub 저장소: https://github.com/twbs/bootstrap/issues/13221.

해결책:

이 문제를 방지하려면 다음을 고려하세요. 제안 사항:

• 매우 작은 화면에서는 .col-xs-1 열을 사용하지 마세요. 대신 .col-xs-2 또는 .col-xs와 같은 더 큰 열을 사용하세요. -3.
• 화면 크기 고려: 화면 크기가 360px 이하로 현실적으로 조정될지 결정합니다. 대부분의 경우 그럴 가능성은 없습니다.

Bootstrap 4에 대한 참고 사항:

Bootstrap 4에서 .col-xs-1의 이름은 . col-1. 너비가 360px 미만인 화면의 .col-1 열에서 동일한 문제가 발생할 수 있습니다.

관련 문제:

Bootstrap 사용자도 그리드와 관련된 유사한 문제를 보고했습니다. 가장 작은 크기로 깨기: https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size

위 내용은 부트스트랩 열이 XS 크기에서 올바르게 줄바꿈되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!