bulma - 使用 Bulma CSS 在表单中并排放置两个输入的最佳方法是什么？

Question

我刚刚开始使用 Bulma 来设计我的网站，并且很难确定该框架是否支持并排放置两个表单字段。最好的例子是用户的名字和姓氏。

Bulma's form group看起来很有希望，但如果您想要两个单独的字段，它似乎不起作用。

我也开始使用网格( columns 和 column 类)但它的间距变得困惑。

这是我想要做的(名字和姓氏部分):

Answer 1

您可以使用 Bulma responsive helpers .

<div class="field-group">
 <div class="field is-inline-block-desktop">
  <label class="label">First Name</label>
  <div class="control">
  <input class="input" type="text" placeholder="e.g Alex">
  </div>
 </div>

<div class="field is-inline-block-desktop">
 <label class="label">Last Name</label>
 <div class="control">
  <input class="input" type="text" placeholder="e.g Smith">
 </div>
 </div>
</div>

Example fiddle

编辑:
刚刚通过官方文档，建议在字段容器上使用“is-horizo​​ntal 修饰符”。

查看更多 here .