如何实现标签/值换行显示并展示嵌套标签值对（Bulma框架）

我明白你想要实现标签和对应的值垂直换行显示，同时还要支持嵌套的标签值结构——用Bulma的columns直接横向拆分标签和值确实会遇到布局错位、没法嵌套的问题。下面给你两种基于Bulma原生类的可行方案，不用额外写复杂的自定义CSS：

方案1：基础的标签-值垂直布局（多组并排） #

这种方案适配你原本多组标签值需要并排的场景，每个标签值对是垂直结构，整体用Bulma的网格系统控制排列：

<section class="section">
  <p>Please confirm details below as required and stated before, no jokes</p>
  <div class="container">
    <div class="columns is-multiline">
      <!-- 第一组标签值 -->
      <div class="column is-4">
        <div class="field">
          <label class="label has-text-weight-bold">Short Label 1:</label>
          <div class="control">
            <p>Short Label 1 Value</p>
          </div>
        </div>
      </div>
      <!-- 第二组标签值 -->
      <div class="column is-4">
        <div class="field">
          <label class="label has-text-weight-bold">Short Label 2:</label>
          <div class="control">
            <p>long value long value long value long value long value long value long value</p>
          </div>
        </div>
      </div>
      <!-- 第三组标签值 -->
      <div class="column is-4">
        <div class="field">
          <label class="label has-text-weight-bold">Bit Long Label Than Usual 3:</label>
          <div class="control">
            <p>long value long value</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

关键说明： #

• columns is-multiline让列在空间不足时自动换行，避免横向溢出
• 每个标签值对放在独立的column里，内部用Bulma原生的field+label+control结构，天然实现标签在上、值在下的垂直布局
• label标签自带和下方控件的间距，不用额外调整样式

方案2：带嵌套的标签值对布局 #

如果需要实现层级嵌套的标签值（比如某个父标签下包含多个子标签值），可以结合Bulma的panel组件来做，层级关系会更清晰：

<section class="section">
  <p>Please confirm details below as required and stated before, no jokes</p>
  <div class="container">
    <div class="columns is-multiline">
      <!-- 普通标签值组 -->
      <div class="column is-4">
        <div class="field">
          <label class="label has-text-weight-bold">Short Label 1:</label>
          <div class="control">
            <p>Short Label 1 Value</p>
          </div>
        </div>
      </div>
      <!-- 带嵌套的标签值组 -->
      <div class="column is-8">
        <div class="field">
          <label class="label has-text-weight-bold">Parent Label (with nested values):</label>
          <div class="control">
            <div class="panel is-light">
              <div class="panel-block">
                <div class="field is-horizontal">
                  <div class="field-label is-narrow">
                    <label class="label has-text-weight-normal">Child Label 1:</label>
                  </div>
                  <div class="field-body">
                    <div class="field">
                      <div class="control">
                        <p>Child Value 1</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel-block">
                <div class="field is-horizontal">
                  <div class="field-label is-narrow">
                    <label class="label has-text-weight-normal">Child Label 2:</label>
                  </div>
                  <div class="field-body">
                    <div class="field">
                      <div class="control">
                        <p>long child value long child value long child value</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

嵌套结构说明： #

• 父标签用普通label，嵌套内容放在control内的panel组件中，提供清晰的边框和层级间距
• 子标签值对用field is-horizontal实现子标签与子值的横向排列（如果想要子标签和子值也垂直换行，把is-horizontal去掉即可）

为什么原来的代码存在问题？ #

你原本的代码把每个标签和每个值拆成独立的column，导致标签和值是完全分离的横向元素，当标签或内容过长时很容易出现布局错位；而用field的原生结构可以让标签和值绑定为一个整体，布局稳定性和扩展性都会更好。

内容的提问来源于stack exchange，提问作者Mathematics