web-dev-qa-db-ja.com

ブルマ-なぜすべての列が1行にあるのですか？

v-forを使用するときにVueJSでBulmaを使用し、すべての列が1行にあり、is-4を追加しようとすると、列幅が変更されますが、まだ1行にあります

<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/

cssvue.jsframeworksbulma
6
Mateusz Kawka

列を折り返す場合は、.is-multiline修飾子を.columnsクラスに追加する必要があります。 詳細はこちら

フィドル

<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>
24
sol