VueJS结合Bulma使用v-for时列全部同行问题求助

嘿，这事儿其实是Bulma框架的.columns容器默认行为导致的，我给你掰扯清楚原因：

• Flexbox的换行逻辑：Bulma的.columns是基于Flexbox实现的容器，默认设置了flex-wrap: wrap，但这个属性的作用是只有当所有列的总宽度超过容器宽度时，才会触发换行。如果总宽度没超，列就会一直挤在同一行里。
• is-4类的宽度计算：你给列加的is-4类，会让每个列占据容器宽度的1/3（Bulma的列系统是12格布局，is-4意味着每列占12份里的4份，也就是33.33%的宽度）。举个例子：
  • 如果你的weatherData.list里只有1-2个项目，总宽度最多66.66%，远没到容器的100%，自然不会换行；
  • 如果刚好是3个项目，总宽度刚好填满100%，也会整整齐齐待在同一行；
  • 只有当项目数≥4时，第4个列的总宽度会超过100%，才会自动换到下一行。
• 容器宽度的影响：另外也可以检查下你的.columns容器有没有被设置了超大的固定宽度，或者它的父元素宽度足够宽，导致哪怕多个is-4列加起来也没超过容器宽度，那它们也会一直待在同一行。

验证小方法 #

你可以试试这两个操作，马上就能看到换行效果：

1. 手动给weatherData.list多塞几个测试项，比如加到4个以上；
2. 给.columns容器加个固定的窄宽度，比如：

<div class='columns' style="width: 600px;">

额外小提示 #

如果想要强制让每个列单独占一行，可以给列添加is-full类；如果想控制不同屏幕下每行显示的列数，还可以用Bulma的响应式类，比如is-4-desktop is-6-tablet，在桌面端每行3个、平板端每行2个。

内容的提问来源于stack exchange，提问作者Mateusz Kawka