부트스트랩 4 그리드

부트스트랩 4 그리드 시스템

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

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

그리드 시스템은 반응형이며 열은 화면 크기에 따라 자동으로 재정렬됩니다.

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

그리드 클래스

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

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

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

팁:sm 각 클래스가 확장되므로 및 에 대해 동일한 너비를 설정 md하려면 만 지정하면 됩니다 sm.

부트스트랩 4 그리드의 기본 구조

다음은 Bootstrap 4 그리드의 기본 구조입니다.

첫 번째 예: 행을 생성합니다( <div class="row">). 그런 다음 원하는 수의 열(적절한 .col-*-*클래스가 있는 태그)을 추가합니다. 첫 번째 별(*)은 sm, md, lg 또는 xl의 응답성을 나타내고 두 번째 별은 숫자를 나타내며 각 행에 대해 최대 12가 되어야 합니다.

두 번째 예: 각각에 숫자를 추가하는 대신 col부트스트랩이 레이아웃을 처리하도록 하여 동일한 너비의 열을 생성합니다. 두 개의 "col"요소 = 각 열의 너비 50%. 3개의 열 = 각 열에 33.33% 너비. 네 개의 열 = 25% 너비 등 .col-sm|md|lg|xl. 열을 반응형으로 만드는 데 사용할 수도 있습니다.

아래에서 기본 Bootstrap 4 그리드 레이아웃의 몇 가지 예를 수집했습니다.

3개의 동일한 열

다음 예에서는 모든 장치 및 화면 너비에서 3개의 동일한 너비 열을 만드는 방법을 보여줍니다.

반응형 열

다음 예에서는 태블릿에서 시작하여 초대형 데스크톱으로 확장되는 4개의 동일한 너비 열을 만드는 방법을 보여줍니다. 휴대전화 또는 너비가 576px 미만인 화면에서는 열이 자동으로 서로 겹쳐집니다 .

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

다음 예는 태블릿에서 시작하여 대형 추가 데스크탑으로 확장되는 두 개의 다양한 너비 열을 얻는 방법을 보여줍니다.