2 열이있는 부트 스트랩 요소?

Question

<div class="col-sm-6 col-md-4"> 

위의 부트 스트랩 요소에는 해당 요소 내에 2 개의 열 (col-sm-6 & col-md-4)이 있습니다. 그게 무슨 뜻입니까? 바보 같은 질문에 사과드립니다.

Answer 1

각 부트 스트랩 요소에는 row 및 열이있을 수 있습니다. 예를 들어 요소의 너비가 100 픽셀이고 너비가 4와 6 인 경우 40px와 60px를 얻습니다. 물론 패딩은 없습니다.

가 .col-md- 접두사는 중간 장치 (≥992px)에 적용됩니다 https://getbootstrap.com/examples/grid/

Answer 2

에 Two columns with two nested columns를 참조 .col-sm- 접두사 당신은 http://getbootstrap.com/css/#grid-options

에 대한 자세한 내용을보실 수 있습니다

(≥768px) 소형 기기에 적용됩니다

두 클래스를 동시에 사용하면 사용자의 장치/해상도에 따라 다른 동작을 수행 할 수 있습니다.

예를 들어, 같은 마크 업 및 추가 CSS, 당신은 낮은 해상도에서 더 큰 해상도의 옆에 세 개의 열 측과 나란히 2 열 측과 그 아래 하나를 달성 할 수

당신에게 보고 codepen에이 예제들을 플레이 할 수 있습니다 (480 픽셀까지 전화) http://codepen.io/rebagliatte/pen/GNKvOB

Answer 3

• col-xs-* ---> 여분의 소형 기기
• col-sm-* ---> 소형 기기 (태블릿, 768px 이상)
• col-md-* ---> 중간 장치 (데스크톱, 992px 이상)
• col-lg-* ---> 대형 장치 (대형 데스크탑, 1200 픽셀 이상)

위의 각 클래스는 화면 크기에 따라 다릅니다.

그래서 귀하의 경우 col-sm-6 & col-md-4.

컨테이너는 소형 장치의 경우 6 열을, 중형 장치의 경우 4 열을 차지합니다.

기본적으로 지정된 항목이 없기 때문에 화면 크기가 여분의 소형 장치로 이동하는 경우 12 열인 전체 너비를 차지합니다.

희망이 도움이 :) 당신은 부트 스트랩을 배우고 싶은 경우

가