부트스트랩 col-sm col-md 차이

부트스트랩 펜스 시스템 CSS에서 col-xs-*, col-sm-*, col-md-*의 의미는 디스플레이 화면의 너비에 따라 해당 클래스 스타일을 자동으로 선택한다는 것입니다:

.col-xs- 초소형 화면 휴대폰((추천 학습: Bootstrap 비디오 튜토리얼)

.col-sm- 소형 화면 태블릿(≥768px)

.col-md- 중형 화면 데스크톱 모니터(≥992px)

.col-lg- 대형 화면 데스크톱 모니터(≥1200px)

우선:

1, col-column,

2, xs-maxsmall, super small; sm-medium, Medium;

3, -*는 열을 차지하는 것을 의미합니다. 즉, 각 행을 12개의 열로 자동으로 나누는 그리드 시스템 비율을 차지합니다. 4, col- xs-*초소형 화면 휴대폰(

.col-sm-*소형 화면 태블릿(≥768px),

.col-md-*중형 화면 데스크톱 모니터( ≥992px) (게이트 그리드 매개변수).

5. 화면 종류에 관계없이 그리드 시스템은 자동으로 각 행을 12개의 열로 나누고 매개변수 뒤에 col-xs-* 및 col-가 표시됩니다. sm-* 및 col-md-* 현재 화면에서 각 div가 차지하는 열 수입니다.

예를 들어

화면에서 이 div가 차지하는 위치는 다음과 같습니다. .col-xs-6은 초소형 화면에서 6열을 차지합니다. 이는 화면 절반(12/6열 = 2div)이고, .col-md-3은 중간 차선 화면에서 3열을 차지하며 이는 1/4(12/3열 = 4div)입니다.

6. 반대로 작은 화면에 3개의 div를 나란히 표시하려면(12/3 = 각각 4개의 열을 차지함) 큰 화면에 6개의 div를 표시합니다(12/6). = 각각 2개의 열을 차지함), col-md-2를 사용하면 원하는 조판을 제어할 수 있습니다.

Bootstrap과 관련된 더 많은 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 col-sm col-md 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!