부트 스트랩에서 col-lg- *, col-md- * 및 col-sm- *의 차이점은 무엇입니까?

무엇 사이의 차이 col-lg-*, col-md-*그리고 col-sm-*트위터 부트 스트랩에?

2019 업데이트 ...

부트 스트랩 3 그리드에서 오는 4 개 계층 (또는 "중단") ...

• 초소형 (스마트 폰용 .col-xs-*)
• 소형 (태블릿 용 .col-sm-*)
• 중간 (노트북 용 .col-md-*)
• 대형 (노트북 / 데스크톱 용 .col-lg-*).

이러한 격자 크기를 사용하면 다른 너비에서 격자 동작을 제어 할 수 있습니다. 다른 계층은 CSS 미디어 쿼리에 의해 제어됩니다 .

부트 스트랩의 12 열 그리드에서

col-sm-3일반적인 작은 장치 너비 (> 768 픽셀)에서 너비 가 12 열 중 3 열 (25 % )

col-md-3일반적인 중간 장치 너비 (> 992 픽셀)에서 너비 가 12 열 중 3 열 (25 % )

작은 단계 ( xs, sm또는 md)도 대형 스크린 폭의 크기를 정의한다 . 따라서 모든 계층 에서 동일한 크기 열에 대해 가장 작은 뷰포트의 너비를 설정하십시오.

<div class="col-lg-3 col-md-3 col-sm-3">..</div> 와 같다,

<div class="col-sm-3">..</div>

더 큰 계층이 암시됩니다. 때문에 col-sm-3수단 3 units on sm-and-up, 구체적 않는 다른 크기를 사용하는 더 큰 단계 재정의.

xs(기본)> 재정의 sm> 재정의 md> 재정의lg

클래스를 결합 하여 서로 다른 격자 크기 에서 열 너비 변경을 사용하십시오 . 반응 형 레이아웃이 만들어집니다.

<div class="col-md-3 col-sm-6">..</div>

sm, md및 lg그리드 스크린 / 뷰포트에 수직으로 모든 "스택"이하 768 이상 것이다. 여기에서 xs격자가 맞습니다. col-xs-*클래스 를 사용하는 열은 세로로 쌓이지 않고 가장 작은 화면에서 계속 축소됩니다.

이 데모를 사용 하여 브라우저 크기를 조정 하면 격자 크기 조정 효과가 나타납니다.

부트 스트랩 4

에서 부트 스트랩 4 거기에 새로운 -xl-크기 볼 이 데모를 . 또한 -xs-중위가 제거 된 작은 열 단순히 그래서 col-1, col-2.. col-12, 등 ..

col-*-0 (xs)
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*- 1200px

부트 스트랩 4 그리드 데모

또한 Bootstrap 4에는 새로운 자동 레이아웃 열이 포함되어 있습니다 . 이들은 또한 반응 중단 점 (이 col, col-sm, col-md, 등을),하지만 정의 %의 폭이 없습니다. 따라서 자동 레이아웃 열 은 행에서 동일한 너비 를 채 웁니다 .

이 기사는 부트 스트랩 그리드에 대해 더 자세히 설명합니다.

부트 스트랩 문서 는 그것을 설명하지만 그것을 얻는 데 여전히 시간이 걸렸습니다. 두 가지 방법 중 하나로 자신에게 설명 할 때 더 의미가 있습니다.

열이 가로로 시작한다고 생각하면 열을 쌓을 시간을 선택할 수 있습니다 .

예를 들어 열로 시작하는 경우 : ABC

언제 다음과 같이 쌓아야하는지 결정합니다.

ㅏ

비

씨

col-lg를 선택하면 너비가 1200px 미만일 때 열이 쌓입니다.

col-md를 선택하면 너비가 <992px 일 때 열이 쌓입니다.

col-sm을 선택하면 너비가 768px 미만일 때 열이 쌓입니다.

col-xs를 선택하면 열이 누적되지 않습니다.

반면에 열이 쌓여 있다고 생각하면 열이 수평이되는 지점을 선택할 수 있습니다 .

col-sm을 선택하면 너비가 768px 이상일 때 열이 수평이됩니다.

col-md를 선택하면 너비가> = 992px 일 때 열이 수평이됩니다.

col-lg를 선택하면 너비가> = 1200px 일 때 열이 수평이됩니다.

에서 트위터 부트 스트랩 문서 :

• 작은 격자 (≥ 768px) = .col-sm-*,
• 중간 눈금 (≥ 992px) = .col-md-*,
• 큰 격자 (≥ 1200px) = .col-lg-*.

이것의 혼란스러운 측면은 BootStrap 3이 모바일 우선 응답 시스템이며 이것이 Bootstrap 문서의 해당 부분에서 col-xx-n 계층에 어떤 영향을 미치는지 설명하지 못한다는 것입니다. 따라서 더 큰 장치의 값을 선택하면 더 작은 장치에서 어떤 일이 발생하는지 궁금해하고 여러 값을 지정해야하는지 궁금해집니다. (넌 아니야)

낮은 입자 유형 (xs, sm)은 작은 화면에서 레이아웃 모양을 유지하려고 시도하고 큰 유형 (md, lg)은 큰 화면에서만 올바르게 표시되지만 작은 장치에서는 열을 줄 바꿈합니다. 이전 예제에서 인용 된 값은 사용 가능한 화면 영역에 맞도록 부트 스트랩이 모양을 저하시키는 임계 값을 나타냅니다.

이것이 실제로 의미하는 것은 열을 col-xs-n으로 만들면 아주 작은 화면에서도 창이 너무 제한적이어서 페이지가 올바르게 표시되지 않을 때까지 정확한 모양을 유지한다는 것입니다. 즉, 너비가 768px 이하인 장치는 성능이 저하되지 않은 (단일 또는 랩핑 된 열 형식이 아닌) 테이블을 디자인 한대로 표시해야합니다. 분명히 이것은 여전히 ​​열의 내용에 달려 있으며 이것이 핵심입니다. 페이지가 큰 화면의 여러 열을 작은 화면에 나란히 표시하려고하면 열을 고려하지 않으면 열이 자연스럽게 끔찍하게 줄 바꿈됩니다. 따라서 열 내의 데이터에 따라 내용을 적절하게 표시하기 위해 레이아웃이 희생되는 지점을 결정할 수 있습니다.

예를 들어 페이지에 3 개의 col-sm-n 열이 포함 된 경우 페이지 너비가 992px 아래로 떨어지면 부트 스트랩이 열을 행으로 줄 바꿈합니다. 즉, 데이터는 여전히 표시되지만 데이터를 보려면 세로 스크롤이 필요합니다. 레이아웃의 성능을 저하시키지 않으려면 xs를 선택하십시오 (데이터가 저해상도 장치에 3 열로 적절하게 표시 될 수있는 한).

데이터의 가로 위치가 중요한 경우 시각적 특성을 유지하기 위해 더 작은 입도 값을 선택해야합니다. 위치가 덜 중요하지만 모든 장치에서 페이지를 볼 수 있어야하는 경우 더 높은 값을 사용해야합니다.

col-lg-n을 선택하면 화면 너비가 xs 임계 값 1200px 아래로 떨어질 때까지 열이 올바르게 표시됩니다.

장치 크기 및 클래스 접두사 :

• 초소형 휴대 전화 (<768px)- .col-xs-
• 소형 장치 태블릿 (≥768px)- .col-sm-
• 중형 장치 데스크톱 (≥992px)- .col-md-
• 대형 장치 데스크톱 (≥1200px)- .col-lg-

그리드 옵션 :

참조 : 그리드 시스템

TL; DR

.col-X-Y수단 화면 크기 X 최대에는 , Y 열을 채우기 위해이 요소를 스트레칭 .

부트 스트랩은 당 12 열의 그리드를 제공 .row하므로 Y = 3은 너비 = 25 %를 의미합니다.

xs, sm, md, lg 스마트 폰, 태블릿, 노트북, 데스크톱의 크기입니다.

다른 화면 크기에서 다른 너비를 지정하는 것은 작은 화면에서 더 크게 만들 수 있도록하는 것입니다.

예

<div class="col-lg-6 col-xs-12">

의미 : 데스크톱에서 너비 50 %, 모바일, 태블릿 및 랩톱에서 너비 100 %

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

특별한 경우 : 부트 스트랩 그리드 시스템을 배우기 전에 브라우저 확대 / 축소가 100 % (100 %)로 설정되어 있는지 확인하십시오. 예를 들어 : 화면 해상도가 (1600px x 900px)이고 브라우저 줌이 175 %이면 "bootstrap-ped"요소가 쌓입니다.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

크롬 줌 100 %

브라우저 100 %-수평으로 배치 된 요소

크롬 줌 175 %

브라우저 175 %-누적 요소

복잡한 부트 스트랩을합시다!

어떻게 '공지 사항 COL-SM은 아래 (새 라인에 다른 용어 나누기에) 100 % 폭을 차지 576px하지만, COL은 하지 않습니다. gif에서 상단 중앙의 현재 너비를 알 수 있습니다.

코드는 다음과 같습니다.

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

부트 스트랩은 기본적으로 모든 열 (col)을 단일 행의 동일한 너비로 정렬합니다 . 이 경우 col화면 크기에 관계없이 세 개 는 각각 100 % / 3 너비를 차지합니다. gif에서 알 수 있습니다.

이제 한 줄에 하나의 열만 렌더링하려면 각 열에 100 % 너비를 지정하지만 더 작은 화면에만 적용하려면 어떻게해야합니까? 이제 col-xx수업 이 온다 !

col-sm열을 576px 아래의 별도 줄로 나누고 싶었 기 때문에 사용 했습니다. 이 4 가지 col-xx클래스는 모바일, 태블릿, 랩톱, 대형 모니터 등과 같은 다양한 디스플레이 장치를 위해 Bootstrap에서 제공합니다.

따라서 col-sm576px 미만, col-md768px 미만, col-lg992px 미만 및 1200px col-xl미만으로 중단됩니다.

col-xs부트 스트랩 4 에는 클래스 가 없습니다 .

이것은 거의 요약입니다. 다시 일하러 갈 수 있습니다.

그러나 조금 더 있습니다. 이제를 제공 col-*하고 col-xx-*폭을 사용자 정의.

위의 예에서 내가 언급 col했거나 col-xx행에서 동일한 너비를 취 한다는 것을 기억하십시오 . 따라서 특정 너비를 더 넓히려면 col이 작업을 수행 할 수 있습니다.

부트 스트랩 행은 12 부분으로 나뉘어져 있으므로 위의 예에서는 3이 있었 col으므로 각각 12/3 = 4 부분이 필요합니다. 너비를 측정하는 방법으로 이러한 부품을 고려할 수 있습니다.

우리는 또한 형식에 그를 작성할 수 col-*즉, col-4이 같은 :

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

기본적으로 부트 스트랩은 너비가 col(4 + 4 + 4 = 12)와 동일하기 때문에 아무런 차이가 없습니다 .

그러나 1에 7 부분을 col, 2에 3 부분 을주고 col2 부분 (12-7-3 = 2)에서 3 col(7 + 3 + 2이므로 총 12)으로 쉬고 싶다면 간단히 다음과 같이 할 수 있습니다.

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

col-xx-*클래스 의 너비 도 사용자 지정할 수 있습니다 .

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

동작에서 어떻게 보입니까?

합 col이 12를 초과 하면 어떻게 됩니까? 그런 다음 col줄 아래로 이동 / 조정합니다. 예, 행에 대한 열의 수는 제한이 없습니다!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

큰 화면에서는 3 열을 원하지만 작은 화면에서는 2 열로 분할하면 어떻게 되나요?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

당신은 여기에서 놀 수 있습니다 : https://jsfiddle.net/JerryGoyal/6vqno0Lm/

나는이 이미지가 개념을 더 잘 이해하는 것이 좋다고 생각합니다!

자세한 내용은 아래 링크를 참조하십시오.

https://getbootstrap.com/docs/3.4/css/

화면 크기에 따라 행에 몇 개의 열을 배치할지 부트 스트랩에 알리는 데 사용됩니다.

col-xs-2

sm이 작은 화면 md (medium sized), lg (large sized)를 정의하는 것과 같은 방식으로 여분의 small (xs) 화면에서 행에 2 개의 열만 표시하지만 부트 스트랩에 따라 작은 첫 번째 규칙에 따르면

xs-col-2 md-col-4

그러면 xs에서 sm (included)까지의 화면 크기에 대해 2 개의 열이 각 행에 표시되고 다음 크기가되면 변경됩니다. 예를 들어 화면 크기를 더 잘 이해하기 위해 md에서 lg (included)까지 다양한 화면 모드에서 실행 해보십시오. 크롬의 개발자 모드 (ctr + shift + i)와 다양한 픽셀 또는 장치를 사용해보십시오