布尔玛面板，如何在面板内嵌套容器？

Question

我正在尝试在面板中对输入控件进行分组，以使页面看起来更整洁。在使用面板之前，控件如下所示：

上面的标记：

<div class="columns">
  <div class="column">
    <div class="field">
      <label class="label">Patient Name, First</label>
      <div class="control has-icons-left">
        <input class="input is-primary" type="text">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="field">
      <label class="label">Mother Name, First</label>
      <div class="control">
        <input class="input is-info" type="text">
      </div>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="field">
      <label class="label">Patient Name, Last</label>
      <div class="control has-icons-left">
        <input class="input is-primary" type="text">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="field">
      <label class="label">Mother Name, Last</label>
      <div class="control">
        <input class="input is-info" type="text">
      </div>
    </div>
  </div>
</div>

当我尝试将同一组嵌套在面板中时，列中断：

标记：

<nav class="panel">
  <p class="panel-heading">
    Account Basics
  </p>
<div class="panel-block">

<div class="columns">
  <div class="column">
    <div class="field">
      <label class="label">Patient Name, First</label>
      <div class="control has-icons-left">
        <input class="input is-primary" type="text">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="field">
      <label class="label">Mother Name, First</label>
      <div class="control">
        <input class="input is-info" type="text">
      </div>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="field">
      <label class="label">Patient Name, Last</label>
      <div class="control has-icons-left">
        <input class="input is-primary" type="text">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="field">
      <label class="label">Mother Name, Last</label>
      <div class="control">
        <input class="input is-info" type="text">
      </div>
    </div>
  </div>
</div>

</div>
</nav>

是否有一种方法可以完成我想要的只是将面板中现有的控制结构分组？

Answer 1

我认为您可能想尝试删除列，并尝试类似于this Bulma example中的“发件人”字段。您可以在this JSFiddle

的表单中看到它

<nav class="panel">
  <p class="panel-heading">
    Account Basics
  </p>
  <div class="panel-block">
    <div class="field is-horizontal">
      <div class="field-body">

        <div class="field">
          <label class="label">Patient Name, First</label>
          <div class="control has-icons-left">
            <input class="input is-primary" type="text">
          </div>
        </div>
        <div class="field">
          <label class="label">Mother Name, First</label>
          <div class="control">
            <input class="input is-info" type="text">
          </div>
        </div>
        <div class="field">
          <label class="label">Patient Name, Last</label>
          <div class="control has-icons-left">
            <input class="input is-primary" type="text">
          </div>
        </div>
        <div class="field">
          <label class="label">Mother Name, Last</label>
          <div class="control">
            <input class="input is-info" type="text">
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>