부트스트랩 그리드 클래스의 숫자는 레이아웃을 어떻게 제어합니까?

Bootstrap의 그리드 시스템 이해

Bootstrap에서 그리드 시스템은 col-md-4, col-xs-1 및 col-lg-2. 이러한 클래스는 숫자를 활용하여 그리드 정렬, 사용법 및 표현을 결정합니다.

숫자가 그리드 정렬을 결정하는 방법

이 클래스 이름(1-12)의 숫자는 다음을 의미합니다. 특정 그리드 열이 차지하는 컨테이너 너비의 비율입니다. 예를 들어 col-*-6은 전체 12개 열 중 6개에 걸쳐 있고, col-*-12는 전체 너비(12개 열)에 걸쳐 있는 식입니다.

숫자 활용

이 숫자를 효과적으로 사용하려면 컨테이너가 12개의 동일한 열로 나누어져 있다고 상상해 보세요. 특정 번호로 클래스를 할당하면 열이 컨테이너를 차지하는 방식을 정확하게 정의할 수 있습니다. 예를 들어 컨테이너에서 col-xs-6을 두 번 사용하면 전체 컨테이너를 집합적으로 채우는 두 개의 동일한 크기 열이 생성됩니다.

숫자 표현

숫자 클래스 이름에서 그리드 요소가 해당 컨테이너 크기 내에서 확장되는 열 수를 나타냅니다. 예를 들어 col-xs-6은 매우 작은 화면(휴대폰)에서 요소가 컨테이너 너비의 절반을 차지함을 나타냅니다.

반응형 디자인의 영향

Bootstrap은 여러 가지 기능을 제공합니다. xs, sm, md, lg와 같은 열 클래스를 사용하여 다양한 화면 크기에 대응합니다. 이러한 클래스 접두사는 특정 그리드 구성이 적용되는 화면 크기를 나타냅니다. 다양한 접두사(예: col-xs-6 col-md-4)가 있는 클래스를 결합하면 사용하는 기기에 따라 조정되는 반응형 레이아웃을 만들 수 있습니다.

다중 화면 크기 지원

요소에 여러 열 클래스를 할당하는 경우 지정된 그리드 구성은 해당 화면 크기 이상에 적용됩니다. 예를 들어, col-xs-6 col-md-4는 다른 선언으로 재정의되지 않는 한 아주 작은 화면과 작은 화면에서는 6개 열, 중간 화면과 큰 화면에서는 4개 열로 확장됩니다.

참고: xs 클래스가 지정되지 않으면 요소의 기본값은 col-xs-12입니다. 즉, 매우 작은 화면에서 전체 너비에 걸쳐 표시됩니다.

오버플로 처리

컨테이너 내에서 열이 12개를 초과하면 넘치는 요소가 현재 줄 내에서 줄 바꿈되지 않고 다음 줄에 표시된다는 점에 유의하세요.

위 내용은 부트스트랩 그리드 클래스의 숫자는 레이아웃을 어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!