Bulma.css-以表格的形式并排对齐字段和标签

时间:2018-09-06 18:59:05

标签: css sass bulma

当字段和标签与bulma并排时如何正确对齐? 什么是用于实现正确行为的字段的正确容器?

很抱歉这个简单的问题,感谢您阅读本文,以下是代码库/代码:

https://codepen.io/anon/pen/mGBXgK

<div class="container">
  <div class="section">
    <div class="columns">
      <div class="column is-three-quarters">

        <div class="field is-horizontal">
              <div class="field-label is-normal">
                <label class="label">Field One</label>
              </div>
              <div class="field-body">
                <div class="field is-narrow">
                  <div class="control">
                    <input type="text" class="input">
                  </div>
                  <p class="help is-danger">
                    Error Placeholder
                  </p>
                </div>
              </div>
            </div>

        <div class="field is-horizontal">
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Field Two</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <div class="select">
                        <select>
                          <option>AA</option>
                          <option>BB</option>
                          <option>CC</option>
                        </select>
                      </div>
                    </div>
                  <p class="help is-danger">
                    Error Placeholder
                  </p>
                  </div>
                </div>
              </div>

              <div class="field is-horizontal">
              <div class="field-label is-normal">
                <label class="label">Field Three</label>
              </div>
              <div class="field-body">
                <div class="field is-narrow">
                  <div class="control">
                    <input type="text" class="input">
                  </div>
                  <p class="help is-danger">
                    Error Placeholder
                  </p>
                </div>
              </div>
            </div>
        </div>

      </div>      
    </div>
  </div>
</div>

0 个答案:

没有答案