html - 如何在新行上显示标签/值并显示另一个嵌套标签值对

Question

这就是我要的，

这就是我得到的，

这是代码，我正在使用 bulma，但我很挣扎......

<section class="section">
  <p>Please confirm details below as required and stated before, no jokes</p>
  <div class="container">
    <div class="columns">

      <div class="column is-3 has-text-right has-text-weight-bold">
        Short Label 1:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            Short Label 1 Value
          </p>
        </div>
      </div>

      <div class="column is-2 has-text-right has-text-weight-bold">
        Short Label 2:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            long value long value long value long value long value long value long value 
          </p>
        </div>
      </div>

      <div class="column is-2 has-text-right has-text-weight-bold">
        Bit Long Label Than Usual 3:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            long value long value
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

标签： htmlcssbulma

Answer 1

看起来你需要把那

<div class="column ...">
    ...
</div>

内行

 <div class='rows'>
      <div class='row is-full'> column 1 | column 2 </div>
      <div class='row is-full'> column 1 | column 2 </div>
    </div>