내 Bootstrap xs 열이 360px 아래로 쌓이는 대신 줄 바꿈되는 이유는 무엇입니까?

Bootstrap: xs 열이 예기치 않게 래핑됨

Bootstrap 프레임워크는 유연하고 효율적인 레이아웃을 생성하기 위한 유틸리티를 제공하여 반응형 디자인을 단순화합니다. 그러나 특히 매우 작은(xs) 크기에서 열이 예상대로 동작하지 않을 때 사용자는 예상치 못한 문제에 직면하는 경우가 있습니다.

문제: xs 열은 스태킹 대신 래핑

일반적으로 행이 열의 합이 12가 되면 화면 너비가 줄어들면서 수직으로 쌓여야 합니다. 그러나 작은 화면에서는 열이 예기치 않게 화면 끝이 아닌 시작 부분으로 줄바꿈될 수 있습니다.

원인: 브라우저 불일치

이 동작은 Bootstrap의 알려진 문제로 인해 발생합니다. 화면 너비가 360px 미만인 경우 너비가 1%인 열(col-xs-1)이 컨테이너 내에 제대로 맞지 않을 수 있습니다. 1% 너비를 지정했음에도 불구하고 양쪽의 15px 패딩은 사실상 열을 더 넓게 만들어 브라우저의 레이아웃 엔진과 불일치를 일으킵니다.

해결책: 작은 화면에는 col-xs-1을 사용하지 마세요

이 문제를 방지하려면 360px보다 작은 화면에서는 col-xs-1을 사용하지 않는 것이 좋습니다. 애플리케이션이 사용자가 이 제한 이하로 화면 크기를 조정할 것으로 예상하는지 확인하십시오.

Bootstrap 4에 대한 참고 사항

Bootstrap 4에서는 col-xs-1 클래스의 이름이 col-1로 변경되었습니다. 위에서 설명한 문제는 여전히 Bootstrap 4의 col-1에 적용됩니다.

위 내용은 내 Bootstrap xs 열이 360px 아래로 쌓이는 대신 줄 바꿈되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!