Bootstrap 4 그리드

Bootstrap의 그리드 시스템은 flexbox로 구축되었으며 페이지 전체에 최대 12개의 열을 허용한다.

12개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있다.

그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 자동으로 다시 정렬된다.

합계가 12개 이하인지 확인하십시오. 사용 가능한 열 12개를 모두 사용할 필요는 없다.

그리드 클래스

Bootstrap 4 그리드 시스템에는 다섯 가지 클래스가 있다.

• .col-(초소형 장치 – 화면 너비가 576px 미만)
• .col-sm-(소형 장치 – 화면 너비가 576px 이상)
• .col-md-(중형 장치 – 화면 너비가 768px 이상)
• .col-lg-(대형 장치 – 화면 너비가 992px 이상)
• .col-xl-(특대형 장치 – 화면 너비가 1200px 이상)

위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있다.

⭐ 각 클래스는 확장되므로 sm 및 md에 동일한 너비를 설정하려면 sm만 지정하면 된다.

Bootstrap 4 그리드의 기본 구조

형식

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

세 개의 동일한 열

예제

<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-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

두 개의 동일하지 않은 반응 열

예제

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기