칼럼 반응형
칼럼 반응형 (Columns responsiveness)
기본적으로 칼럼은 태블릿부터 활성화됩니다. 즉 모바일에서는 칼럼들이 위아래로 쌓이게 돼요. 모바일에서도 칼럼이 동작하도록 하려면 columns 컨테이너에 is-mobile 수식어를 추가하면 됩니다:
출처: 문서
본문
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
차이를 확인하려면 브라우저 창을 조절해 보세요. 칼럼이 언제 쌓이고 언제 가로로 배치되는지 볼 수 있어요.
데스크톱에서만 칼럼을 쓰고 싶다면 columns 컨테이너에 is-desktop 수식어를 사용합니다:
<div class="columns is-desktop">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
브레이크포인트별 칼럼 크기 (Different column sizes per breakpoint)
각 뷰포트(mobile, tablet, desktop)마다 칼럼 크기를 정의할 수 있어요. 예를 들어 is-three-quarters-mobile, is-two-thirds-tablet, is-half-desktop, is-one-third-widescreen, is-one-quarter-fullhd 수식어를 함께 사용할 수 있습니다.
이 클래스들이 어떻게 동작하는지 확인하려면 브라우저 창 크기를 바꿔 보세요. 같은 칼럼이 브레이크포인트마다 너비가 어떻게 달라지는지 볼 수 있어요.
<div class="columns is-mobile">
<div
class="
column
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd
"
>
<code>is-three-quarters-mobile</code><br />
<code>is-two-thirds-tablet</code><br />
<code>is-half-desktop</code><br />
<code>is-one-third-widescreen</code><br />
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>