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

时间:2019-02-11 02:10:17

标签: css bulma

我有一个布尔玛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上发布此代码

您会发现Form2和Form3之间存在巨大差距。

我的问题是如何消除这种差距?

我是布尔玛的新手,还是CSS的新手。

2 个答案:

答案 0 :(得分:0)

您可以删除第96行 然后在第97行中删除is-offset-2,这将是我帮助修改的以下代码。

希望它对您有帮助。

  <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 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>

答案 1 :(得分:0)

enter image description here看看我的笔。 2更改:主要问题是将第二和第三种形式都包装在一个列中,因此左侧是其自己的列,然后右侧包含其他两种形式。

然后,您需要从form3上方的offset-2中删除col-is-10类,因为整个右列只有10个宽。

https://codepen.io/DanOswalt/pen/qgoMNv?editors=1000

<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 class="column is-10">
            <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>
  </div>
</section>