칼럼 옵션
칼럼 옵션 (Column options)
칼럼을 세로로 정렬하고 싶다면, columns 컨테이너에 is-vcentered 수식어를 추가하면 됩니다.
출처: 문서
본문
<div class="columns is-vcentered">
<div class="column is-8">
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
</div>
</div>
Multiline
새 줄을 시작하고 싶을 때마다 columns 컨테이너를 닫고 새로 시작할 수도 있지만, is-multiline 수식어를 추가하면 한 줄에 들어가는 것보다 많은 column 요소를 배치할 수도 있어요.
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">Auto</div>
</div>
칼럼 가운데 정렬 (Centering columns)
빈 칼럼을 사용해 .column 요소 주변에 가로 공간을 만들 수도 있지만, 부모 .columns 요소에 .is-centered를 사용할 수도 있어요:
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br />
</p>
</div>
</div>
.is-multiline과 함께 사용하면 유연한 가운데 정렬 목록을 만들 수 있어요 (창 크기를 바꿔가며 뷰포트별 정렬을 확인해 보세요):
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br />
Fifth Column
</p>
</div>
</div>