html - 如何完全删除.invisible div？

Question

我试图隐藏一个 select 标签，只在需要时显示它。

所以我使用了 bootstrap 的 .invisible 但结果是，即使它是隐藏的，它仍然占用空间。

  <div class="row invisible">
    <div class="form-group form-group-lg col-lg-12">
      <div class="row">
        <label for="for-select" class="col-lg-2 col-form-label">Items</label>
        <div class="col-lg-10">
          <select name="for-select" id="for-select" class="form-control">
          </select>
        </div>
      </div>
    </div>
  </div>

但是结果是这样的:

Answer 1

可见性和显示之间有区别:

可见性可以在不改变尺寸的情况下使某些东西不可见。显示会更改显示，因此不会占用任何空间。

https://getbootstrap.com/docs/4.0/utilities/visibility/

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

使用其中一种显示类而不是可见性类。