小编Mat*_*wka的帖子

我使用时使用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/

我想在点击按钮后从输入中获取一个值，但一直都在起作用

var buttonToBinary = document.querySelector("#toBinary");
buttonToBinary.addEventListener('click', console.log(getInput()));

function getInput() {
  return document.querySelector("#inputSector").value;
}

<input type="text" name="userInput" id="inputSector" value="aa" />
<button id="toBinary" type="submit">to binary</button>

getInput()已在加载页面上启动。请帮我。