时间戳

首页 > 解决方案 > 布尔玛面板，如何在面板内嵌套容器？

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

问题描述

我正在尝试对面板中的输入控件进行分组，以使页面看起来更干净。在使用面板之前，控件看起来像这样：

在此处输入图像描述

上面的标记：

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

有没有办法做我想做的事，只是在面板内对现有的控制结构进行分组？

标签： htmlcssformspanelbulma

解决方案

我认为您可能想尝试删除列并尝试类似于此 Bulma 示例中的“发件人”字段的内容。您可以在此 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>

推荐阅读