如何完全删除.invisible div？

Question

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

所以我使用.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

使用.d-none而不是.invisible。

.d-none将使用css属性display: none;。https://getbootstrap.com/docs/4.0/utilities/display/

.invisible使用visibility: hidden;，它可以很好地隐藏内容，但为音频阅读器保留它。https://getbootstrap.com/docs/4.0/utilities/visibility/

Answer 2

可见性和显示器之间有区别：

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

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

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

使用一个显示类而不是可见性类。

Answer 3

使用类.hidden代替.invisible，并在需要显示时更改删除类.hidden