gpt4 book ai didi

css - Bulma - 为什么所有列都在一行上?

转载 作者:技术小花猫 更新时间:2023-10-29 11:15:08 54 4
gpt4 key购买 nike

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

54 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com