我只想让每个标签只占一行。
<div class="container">
<div class="columns">
<div class="column">
</div>
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</form>
</div>
<div class="column">
</div>
</div>
</div>
这就是正在发生的事情。这些标签不适合输入，它们占了一行以上
因此，我尝试向每个输入添加其他容器。它确实有效，但我们还有很多工作要做。标签和输入之间也有很大的差距。
<div class="column is-one-third">
<form>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p1Name">PLAYER ONE</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="container">
<div class="columns">
<div class="column is-4">
<div class="field-label is-normal has-text-left">
<label class = "label" for="p2Name">PLAYER TWO</label>
</div>
</div>
<div class="column">
<div class="field-body">
<input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="column">
</div>
标签和输入之间有很大的差距
有没有更好的方法？
