Bulma - почему все столбцы на одной строке?

Я использую Bulma с VueJS, когда я использую v-for, все столбцы находятся в одной строке, я пытался добавить 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/


frameworks vue.js css bulma
person Mateusz Kawka    schedule 17.01.2018    source источник
comment
Не могли бы вы предоставить выведенный HTML? Вот что я получаю из вашего кода --› jsfiddle.net/sol_b/6rfo3dvL/1   -  person sol    schedule 17.01.2018
comment
jsfiddle.net/6rfo3dvL/2   -  person Mateusz Kawka    schedule 17.01.2018
comment
Вам просто нужно добавить is-multiline в контейнер columns. Я добавил ответ, надеюсь, что это поможет   -  person sol    schedule 17.01.2018

Ответы (1)


arrow_upward
38
arrow_downward

Если вы хотите, чтобы столбцы переносились, вам нужно добавить модификатор .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>

person sol    schedule 17.01.2018
comment
Большое спасибо. - person Mateusz Kawka; 17.01.2018
comment
Черт, круто. Спасибо! - person Bcktr; 13.09.2020