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

Question

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

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

我也开始使用网格（columns和column类），但间距变得混乱。

这是我正在尝试做的事情（名字和姓氏部分）：

标签： bulma

Answer 1

您可以使用Bulma 响应式助手。

<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>

示例小提琴

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

在这里查看更多。