Bulma - 为什么所有列都在一行上？答案

【问题标题】：Bulma - why all columns are on one line?Bulma - 为什么所有列都在一行上？
【发布时间】：2018-06-26 11:35:57
【问题描述】：

当我使用v-for时，我将Bulma与VueJS一起使用，所有列都在一行上，我尝试添加is-4，然后列宽发生变化但它们仍然在一行上

<div class='columns'>
<div class='column' 
v-for='item in weatherData.list' 
v-bind:key='item.data'>

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
     </figure>
    </div>
   <div class="card-content">
               ...
    </div>
   </div>
   </div>
   </div>

谁能给我解释一下它是如何工作的？

谢谢！

编辑

html 输出：https://jsfiddle.net/6rfo3dvL/2/

【问题讨论】：

您能提供输出的 HTML 吗？这是我从你的代码中得到的 --> jsfiddle.net/sol_b/6rfo3dvL/1
jsfiddle.net/6rfo3dvL/2
您只需将is-multiline 添加到您的columns 容器中。我已经添加了一个答案，希望对您有所帮助

标签： css vue.js frameworks bulma

【解决方案1】：

如果您希望列换行，您需要将 .is-multiline 修饰符添加到 .columns 类。 More information here

fiddle

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<div class='columns is-multiline'>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>

  </div>
</div>

【讨论】：

非常感谢。
该死的，太棒了。谢谢！