여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 그리드 시스템
Bootstrap – Bootstrap 4 그리드 시스템
5개월전 작성
5개월전 수정



Bootstrap 4 그리드 시스템

Bootstrap의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용한다.

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

스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1
 스팬 4  스팬 4  스팬 4
스팬 4 스팬 8
스팬 6 스팬 6
스팬 12

Bootstrap의 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 다시 정렬된다.
큰 화면에서는 콘텐츠를 세 개의 열로 구성하면 더 보기 좋을 수 있지만, 작은 화면에서는 콘텐츠 항목을 쌓아 두는 것이 더 좋다.

그리드 클래스

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

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

⭐ 각 클래스는 스케일업되므로 sm과 md의 너비를 동일하게 설정하려면 sm만 지정하면 된다.

예제

기본 예시
예제 보기

그리드 시스템 규칙

일부 Bootstrap 4 그리드 시스템 규칙:

  • 올바른 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 .container-fluid(전체 너비) 내에 배치해야 한다.
  • 행을 사용하여 수평 열 그룹 만들기
  • 내용은 열 내에 배치해야 하며 열만 행의 바로 아래 자식일 수 있다
  • .row 및 .col-sm-4와 같은 미리 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 만들 수 있다.
  • 열은 패딩을 통해 거터(열 내용 사이의 간격)를 생성한다. 그 패딩은 .row에서 음의 여백을 통해 첫 번째 열과 마지막 열에 대한 행에서 상쇄된다.
  • 격자열은 사용할 수 있는 열 12개의 수를 지정함으로써 생성된다. 예를 들어, 3개의 동일한 열은 3개의 .col-sm-4를 사용할 것이다.
  • 열 너비는 백분율이므로 항상 유동적이며 상위 요소에 대해 크기가 지정된다.
  • 부트스트랩 3과 부트스트랩 4의 가장 큰 차이점은 부트스트랩 4가 이제 플로트 대신 플렉스박스를 사용한다는 것이다.
  • 플렉스박스의 한 가지 큰 장점은 폭이 지정되지 않은 격자열이 자동으로 같은 폭의 열로 배치된다는 것이다. 예: .col-sm인 세 원소는 작은 중단점과 위쪽으로부터 각각 33.33%의 폭을 가진다.

⭐ Flexbox는 IE9 및 이전 버전에서는 지원되지 않는다.

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 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 class="col"></div>
</div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그