当我使用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
类。 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>
关于css - bool 玛-为什么所有列都在一行上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48303637/