Bulma - 为什么所有列都在一行上?
Bulma - why all columns are on one line?
我在使用 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/
如果您希望列换行,您需要将 .is-multiline
修饰符添加到 .columns
class。 More information here
<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>
我在使用 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/
如果您希望列换行,您需要将 .is-multiline
修饰符添加到 .columns
class。 More information here
<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>