bootstrap 4 navbar折疊的div被激活時正在移動所有標題菜單

Question

我一直在使用Bootstrap 4從3.x遷移，現在一切正常，除了標題中的一個問題，我有一個折疊的div，用於搜索，被激活時，該div會移動所有菜單，並且對於用戶來說不是一個很好的體驗（請忽略屏幕截圖中的難看邊框，它們僅用於調試目的）。

這是正常的菜單

當我點擊搜索圖標時

我的搜索表還有另一個Div

如果仔細觀察，我們可以看到上一個div的大小更大，並且所有項目都移到了左側

更新：

這是問題的動畫gif：

https://i.gyazo.com/a19328136dea86aebf6566972d7855e5.mp4

這是帶有HTML布局代碼的Gist： https : //gist.github.com/ricardojriosr/1aa3f0c77c4d6786b42cce6d03a9c154

我該如何解決此問題，以便菜單不會更改大小並向左移動項目？ 提前致謝。

Answer 1

你可以嘗試添加

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

在您的CSS中。