칼럼 중첩

칼럼 중첩 (Nesting columns)

설계에 더 많은 유연성을 주고 싶다면 칼럼을 중첩할 수 있어요. 아래 구조만 따라 하면 됩니다:

  • columns: 최상위 칼럼 컨테이너
    • column
      • columns: 중첩 칼럼
        • column 등등...

multiline columns와의 차이는 HTML 코드의 순서에 있어요. 중첩된 구조에서는 파란 칼럼들이 모두 빨간 칼럼들보다 앞에 배치됩니다. 더 좁은 뷰포트로 창을 줄이면 그 결과를 확인할 수 있어요.

출처: 문서

본문

다음은 칼럼을 중첩한 예시입니다. 두 개의 상위 칼럼이 있고, 그 안에 각각 중첩 칼럼들이 들어 있습니다:

<div class="columns">
  <div class="column">
    <p class="bd-notification is-info">First column</p>
    <div class="columns is-mobile">
      <div class="column">
        <p class="bd-notification is-info">First nested column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-info">Second nested column</p>
      </div>
    </div>
  </div>
  <div class="column">
    <p class="bd-notification is-danger">Second column</p>
    <div class="columns is-mobile">
      <div class="column is-half">
        <p class="bd-notification is-danger">50%</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
    </div>
  </div>
</div>

중첩된 columns는 각 줄 사이에도 간격이 생긴다는 점을 기억하세요.

더 알아보기 (Learn more)