열

flexbox 그리드 시스템 덕분에 정렬, 순서 지정 및 오프셋을 위한 소수의 옵션으로 열을 수정하는 방법을 알아보세요. 또한 열 클래스를 사용하여 그리드가 아닌 요소의 너비를 관리하는 방법을 참조하십시오.

이 페이지에서

머리! 그리드 열을 수정하고 사용자 정의하는 방법에 대해 알아보기 전에 먼저 그리드 페이지 를 읽으십시오 .

작동 방식

열은 그리드의 flexbox 아키텍처를 기반으로 합니다. Flexbox는 개별 열을 변경 하고 행 수준에서 열 그룹을 수정할 수 있는 옵션이 있음을 의미합니다 . 열이 커지거나 줄어들거나 변경되는 방식을 선택합니다.
그리드 레이아웃을 만들 때 모든 콘텐츠는 열에 들어갑니다. Bootstrap 그리드의 계층 구조는 컨테이너 에서 행, 열, 콘텐츠로 이동합니다. 드문 경우지만 콘텐츠와 열을 결합할 수 있지만 의도하지 않은 결과가 발생할 수 있습니다.
Bootstrap에는 빠르고 반응이 빠른 레이아웃을 만들기 위한 미리 정의된 클래스가 포함되어 있습니다. 각 그리드 계층 에 6개의 중단점 과 12개의 열이 있으므로 원하는 레이아웃을 생성할 수 있도록 이미 수십 개의 클래스가 구축되어 있습니다. 원하는 경우 Sass를 통해 비활성화할 수 있습니다.

조정

flexbox 정렬 유틸리티를 사용하여 세로 및 가로로 열을 정렬합니다.

수직 정렬

세 개의 열 중 하나

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

세 개의 열 중 하나

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

수평 정렬

두 열 중 하나

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

열 줄 바꿈

단일 행에 12개 이상의 열이 있는 경우 추가 열의 각 그룹은 하나의 단위로 새 줄로 줄바꿈됩니다.

.col-9

.col-4
9 + 4 = 13 > 12이므로 이 4열 너비 div는 하나의 연속 단위로 새 줄에 래핑됩니다.

.col-6
후속 열은 새 줄을 따라 계속됩니다.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

열 나누기

flexbox에서 열을 새 줄로 나누려면 약간의 해킹이 필요합니다. 열을 새 줄로 묶고 width: 100%싶은 곳에 요소를 추가하세요. 일반적으로 이것은 여러 .rows로 수행되지만 모든 구현 방법이 이를 설명할 수 있는 것은 아닙니다.

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

반응형 디스플레이 유틸리티 를 사용하여 특정 중단점에 이 중단을 적용할 수도 있습니다 .

.col-6 .col-sm-4

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

재정렬

주문 클래스

콘텐츠의 시각적 순서.order- 를 제어하기 위해 클래스를 사용 합니다. 이러한 클래스는 반응하므로 중단점(예: )으로 설정할 수 있습니다. 6개의 모든 그리드 계층 에 대한 지원을 포함합니다 .order.order-1.order-md-215

DOM의 첫 번째, 적용된 순서 없음

DOM에서 두 번째, 더 큰 순서로

DOM의 세 번째, 1의 순서

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

와 를 각각 적용하여 요소 를 변경하는 반응형 .order-first및 .order-last클래스 도 있습니다. 이러한 클래스는 필요에 따라 번호가 매겨진 클래스와 혼합될 수도 있습니다 .orderorder: -1order: 6.order-*

DOM에서 첫 번째, 마지막에 주문

DOM에서 두 번째, 순서가 지정되지 않음

DOM에서 세 번째, 먼저 주문됨

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

열 오프셋

.offset-반응형 그리드 클래스와 여백 유틸리티 의 두 가지 방법으로 그리드 열을 오프셋할 수 있습니다 . 그리드 클래스는 열과 일치하도록 크기가 조정되는 반면 여백은 오프셋 너비가 가변적인 빠른 레이아웃에 더 유용합니다.

오프셋 클래스

.offset-md-*클래스 를 사용하여 열을 오른쪽으로 이동합니다 . 이러한 클래스는 열만큼 열의 왼쪽 여백을 늘 *립니다. 예를 들어, 4개의 열 위로 .offset-md-4이동 합니다..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

응답 중단점에서 열 지우기 외에도 오프셋을 재설정해야 할 수 있습니다. 그리드 예제 에서 실제로 이것을 참조하십시오 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

마진 유틸리티

.me-autov4에서 flexbox로 이동하면 형제 열을 서로 멀리하는 것과 같은 여백 유틸리티를 사용할 수 있습니다 .

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

독립형 열 클래스

클래스를 외부에서 사용 하여 요소에 특정 너비를 .col-*지정할 수도 있습니다 . .row열 클래스가 행의 직계가 아닌 자식으로 사용될 때마다 패딩이 생략됩니다.

.col-3: 너비 25%

.col-sm-9: sm 중단점 위의 75% 너비

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

클래스를 유틸리티와 함께 사용하여 반응형 부동 이미지를 만들 수 있습니다. 텍스트가 더 짧은 경우 플로트를 지우 려면 콘텐츠를 .clearfix래퍼로 감싸야 합니다.

자리 표시자 텍스트의 단락입니다. clearfix 클래스의 사용을 보여주기 위해 여기에서 사용하고 있습니다. 여기에서 열이 부동 이미지와 상호 작용하는 방식을 보여주기 위해 의미 없는 문구를 몇 개 추가하고 있습니다.

보시다시피 단락은 떠 있는 이미지를 우아하게 감싸고 있습니다. 이제 이 지루한 자리 표시자 텍스트가 계속해서 표시되지만 실제로 유형 정보를 전달하지 않는 것이 아니라 여기에 있는 실제 콘텐츠가 어떻게 보일지 상상해 보세요. 그것은 단순히 공간을 차지하며 실제로 읽지 않아야합니다.

그럼에도 불구하고 이 자리 표시자 텍스트를 읽는 데 인내심을 갖고 더 많은 통찰력이나 숨겨진 이스터 에그 콘텐츠를 기대하고 있습니다. 농담, 아마도. 불행히도 여기에는 그런 것이 없습니다.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>