Bootstrap 그리드 시스템에서 "col-md-4", "col-xs-1" 및 "col-lg-2"는 어떻게 작동합니까?

부트스트랩의 그리드 시스템: "col-md-4", "col-xs-1" 및 "col-lg-2" 이해

부트스트랩 그리드 시스템을 사용하면 다양한 화면 크기에서 요소의 레이아웃과 정렬을 제어할 수 있습니다. 숫자와 결합된 "col-" 클래스는 이 시스템에서 중요한 역할을 합니다.

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

"col-* " 클래스는 컨테이너의 전체 너비를 기준으로 열의 너비를 나타냅니다. 각 컨테이너는 총 12개의 열을 수용할 수 있습니다. 따라서 "col-md-6"은 12개 열 중 6개 열을 차지하여 컨테이너 너비의 절반에 해당하는 열이 됩니다.

숫자 사용

이러한 숫자를 사용하려면 적절한 "col-" 클래스와 숫자를 포함하면 됩니다. 예를 들어, "col-xs-3" 클래스가 있는 div는 아주 작은 화면(예: 휴대폰)에서 3개의 열을 차지하는 반면, "col-sm-6" 클래스가 있는 div는 작은 화면(예: 휴대폰)에서 6개의 열을 차지합니다. 화면(예: 태블릿).

의미

"col-*"의 숫자는 Bootstrap에 정의된 응답 중단점을 나타냅니다. xs, sm, md 및 lg 문자는 다음과 같습니다.

• xs: Extra small(휴대폰)
• sm: Small(태블릿)
• md: 중형(일부 데스크톱)
• lg: 대형(나머지 데스크톱)

요소에 여러 "col-" 클래스를 사용하면 다양한 화면 크기에서 어떻게 작동해야 하는지 지정할 수 있습니다. . 예를 들어, 다음 코드는 휴대폰 너비의 절반을 차지하지만 태블릿 너비의 1/3만 차지하는 열을 생성합니다.

<div>

"col-*" 클래스를 이해하면 다음을 수행할 수 있습니다. Bootstrap에서 유연하고 반응이 빠른 레이아웃을 만드세요. 열의 수와 크기를 제어하면 다양한 디바이스에서 최적의 사용자 경험을 얻을 수 있습니다.

위 내용은 Bootstrap 그리드 시스템에서 "col-md-4", "col-xs-1" 및 "col-lg-2"는 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!