在布尔玛两种形式之间的巨大差距

Question

我有一个布尔玛CSS形式，我想消除两种形式之间的差距。有没有一种办法，这布尔玛CSS都不可能不添加自定义CSS进行修改。

<section class="section">
  <div class="container">
    <form class="control">
      <div class="columns is-multiline">
        <div class="column is-2">
          <div class="box">
            <h1 class="subtitle">Form Part 1</h1>
            <div class="field">
              <label class="label">col1</label>
              <div class="control has-icons-right">
                <input class="input" type="text" placeholder="col1">
                <i class="fas fa-dollar-sign"></i>
              </div>
            </div>
            <div class="field">
              <label class="label">col2</label>
              <div class="control has-icons-right">
                <input class="input" type="text" placeholder="col2 ">
                <i class="fas fa-percentage"></i>
              </div>
            </div>
            <div class="field">
              <label class="label">col3</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select>
                    <option>drop1</option>
                    <option>drop2</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="field">
              <label class="label">col3</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select>
                    <option>a</option>
                    <option>b</option>
                    <option>c</option>
                  </select>
                </div>
              </div>
            </div>
            <a class="button is-primary">Next</a>
          </div>
        </div>
        <div class="column is-10">
          <div class="box">
            <h1 class="subtitle">form2</h1>
            <div class="columns ">
              <div class="column is-2">
                <div class="field">
                  <label class="label">col1</label>
                  <div class="control">
                    <input class="input" type="text" placeholder="col1">
                  </div>
                </div>
              </div>
              <div class="column is-2">
                <div class="field">
                  <label class="label">col2</label>
                  <div class="control has-icons-right">
                    <input class="input" type="text" placeholder="col2">
                    <i class="fas fa-dollar-sign"></i>
                  </div>
                </div>
              </div>
              <div class="column is-2">
                <div class="field">
                  <label class="label">col3</label>
                  <div class="control has-icons-right">
                    <input class="input" type="text" placeholder="col3">
                  </div>
                </div>
              </div>
              <div class="column is-2">
                <div class="field">
                  <label class="label">col4</label>
                  <div class="control has-icons-right">
                    <input class="input" type="text" placeholder="col4">
                  </div>
                </div>
              </div>
              <div class="column is-2">
                <div class="field">
                  <label class="label">col5</label>
                  <div class="control has-icons-right">
                    <input class="input" type="text" placeholder="col5">
                  </div>
                </div>
              </div>
            </div>
            <a class="button is-primary">Next</a>
          </div>
        </div>
        <div class="column is-10 is-offset-2">
          <div class="box">
            <h1 class="subtitle">form3</h1>
            <div class="columns">
              <div class="column is-3">
                <div class="field">
                  <label class="label">col1</label>
                  <div class="control">
                    <input class="input" type="text" placeholder="col1">
                  </div>
                </div>
              </div>
              <div class="column is-1">
                <div class="field">
                  <label class="label">col2 </label>
                  <div class="control">
                    <input class="input" type="text" placeholder="col2">
                  </div>
                </div>
              </div>
              <div class="column is-2">
                <div class="field">
                  <label class="label">col3 </label>
                  <div class="control">
                    <input class="input" type="text" placeholder="col3">
                  </div>
                </div>
              </div>
            </div>
            <a class="button is-primary">Next</a>
          </div>
        </div>
      </div>
    </form>
  </div>
</section>

当您发布在https://codepen.io/JMSmith/pen/yZKxOp验证码

你会发现有窗体2和Form3之间的巨大差距。

我的问题是我如何消除这个差距？

我是新来的布尔玛和CSS新手还是。

Answer 1

另一答案