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

时间:2019-12-30 15:16:09

标签: html css bulma

这就是我想要的,

enter image description here

这就是我得到的,

enter image description here

这是代码,我正在使用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>

1 个答案:

答案 0 :(得分:-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>