Dynamic form - row: column handling problem.

[mary-josephine-1]

Overview of the problem

OS/Browser: Ubuntu
NPM Verions

    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.24",
    "vue": "^2.7.10",

Description

I entered multiple columns in a row. All columns are displayed in a single row regardless of column size.
Normally in Bootstrap, if the total column size in a row is greater than 12, it will automatically show as the next row.

I need to use it in a dynamic form. So it cannot be handled manually.

Steps to reproduce

   <section class="section">
      <div class="columns">
        <div class="column is-3">column is-3 -A</div>
        <div class="column is-3">column is-3 -B</div>
        <div class="column is-3">column is-3 -C</div>
        <div class="column is-3">column is-3 -D</div>
        <div class="column is-3">column is-3 -E</div>
        <div class="column is-3">column is-3 -F</div>
        <div class="column is-3">column is-3 -G</div>
        <div class="column is-3">column is-3 -H</div>
      </div>
    </section>

Expected behavior

Actual behavior

[wesdevpro]

@mary-josephine-1 please explain why this issue was closed?

[mary-josephine-1]

Hi, Apologies for not giving a reason.

I found the is-multiline class. This solved the problem.
But it took 1 full day to find this class!

  <div class="columns is-multiline">
        <div class="column is-3">column is-3 -A</div>
        <div class="column is-3">column is-3 -B</div>
        <div class="column is-3">column is-3 -C</div>
        <div class="column is-3">column is-3 -D</div>
        <div class="column is-3">column is-3 -E</div>
        <div class="column is-3">column is-3 -F</div>
        <div class="column is-3">column is-3 -G</div>
        <div class="column is-3">column is-3 -H</div>
      </div>

[kikuomax]

@wesdevpro @mary-josephine-1 This is a Bulma-matter anyway. I am going to move this to Q&A.
https://bulma.io/documentation/columns/options/#multiline