부트스트랩 4 그리드 미디엄

중간 그리드 예

	Extra small	Small	Medium	Large	Extra Large
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Screen width	<576px	>=576px	>=768px	>=992px	>=1200px

이전 장에서 우리는 소형 장치에 대한 클래스가 있는 그리드 예제를 제시했습니다. 우리는 두 개의 div(열)를 사용했으며 25%/75% 분할을 제공했습니다.

그러나 중형 장치에서는 디자인이 50%/50% 분할로 더 나을 수 있습니다.

중간 장치는 768픽셀에서 991픽셀 사이의 화면 너비를 갖는 것으로 정의됩니다 .

중형 장치의 경우 다음 .col-md-*클래스를 사용합니다.

이제 부트스트랩은 "작은 크기에서는 -sm-이 있는 클래스를 보고 사용합니다. 중간 크기에서는 -md-가 있는 클래스를 보고 사용합니다."라고 말합니다.

다음 예에서는 소형 장치에서 25%/75% 분할 및 중형(대형 및 초대형) 장치에서 50%/50% 분할이 발생합니다. 초소형 장치에서는 자동으로 스택(100%)됩니다.

.col-sm-3 .col-md-6

.col-sm-9 .col-md-6

예시

<div class="container-fluid">
<div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Sed ut perspiciatis...</p>
    </div>
</div>
</div>

참고: 합계가 최대 12개 이하인지 확인합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음).

매체만 사용

아래 예에서는 .col-md-6클래스만 지정합니다( 없이 .col-sm-*). 이는 중형, 대형 및 초대형 장치가 50%/50%로 분할된다는 것을 의미합니다. 클래스가 확장되기 때문입니다. 그러나 소형 및 초소형 장치의 경우 수직으로 쌓입니다(100% 너비).

예시

<div class="row">
  <div class="col-md-6">
    <p>Lorem ipsum...</p>
  </div>
<div class="col-md-6">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>

자동 레이아웃 열

부트스트랩 4에는 모든 장치에 대해 동일한 너비의 열을 만드는 쉬운 방법 이.col-md-* 있습니다 . 부트스트랩은 열의 수를 인식하고 각 열의 너비는 동일합니다..col-md

화면 크기가 768px 미만이면 열이 가로로 쌓입니다.

<div class="row">
<div class="col-md">1 of 2</div>
<div class="col-md">2 of 2</div>
</div>


<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3 of 4</div>
<div class="col-md">4 of 4</div>
</div>

1/2

2/2

4 중 1

2/4

3/4

4/4

다음 장에서는 대형 장치에 대해 다른 분할 비율을 추가하는 방법을 보여줍니다.

❮ 이전의 다음 ❯

부트스트랩 4 튜토리얼