What's the best way to put two inputs side by side in a form using Bulma CSS?

Question

I just started using Bulma to style my site and am having a hard time figuring out whether the framework supports putting two form fields side-by-side. The best example would be first and last name of a user.

Bulma's form group looked promising but it doesn't seem to work if you want two separate fields.

I also started using the grid (columns and column classes) but it got messy with spacing.

Here's what I'm trying to do (the first name and last name part):

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修饰符”。

在此处查看更多信息。

Answer 2

使用 Bulma Levels：“在关卡项目中，您可以插入几乎任何您想要的内容：标题、按钮、文本输入或只是简单的文本。” 布尔玛等级

<div class="level">
  <div class="level-left">
    <div class="level-item">
      <div class="field">
        <label class="label">First Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="e.g Alex">
        </div>
      </div>
    </div>
    <div class="level-item">
      <div class="field">
        <label class="label">Middle Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="e.g Bob">
        </div>
      </div>
    </div>
    <div class="level-item">
      <div class="field">
        <label class="label">Last Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="e.g Smith">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

我为此工作了一段时间，但仍然无法通过布尔玛找到一个很好的解决方案，所以最终编写了我自己的课程field-group提供帮助。

CSS

/* Target tablet and up */
@media screen and (min-width: 769px), print {
  .field-group {
    display: flex;
  }

  /* Give margin on left if not first field */
  .field-group > .field:not(:first-child) {
    margin-left: 0.75rem;
  }

  /* Give margin on right if not last field */
  .field-group > .field:not(:last-child) {
    margin-right: 0.75rem;
  }

  /* Allow fields to grow to fill up all horizontal space */
  .field-group > .field {
    flex: 1 1 0;
  }

  /* Remove bottom margin if grouped fields are the last in the form */
  .field-group:last-child > .field {
    margin-bottom: 0;
  }
}

/* If grouped fields aren't the last in the form, give them bottom margin */
.field-group:not(:last-child) > .field {
  margin-bottom: 0.75rem;
}

超文本标记语言

<!-- Wrapper for fields we want to be on one line -->
<div class="field-group">
  <div class="field">
    <label class="label">First Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="e.g Alex">
    </div>
  </div>

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

div这允许您在 a中嵌套多个字段field-group，并且它们将在平板电脑及以上屏幕中的一行上分割可用的空间。在移动设备上，他们将移动到自己的线路。

不会结束这个，因为我希望有一个更优雅的解决方案！