html - bootstrap 4导航栏折叠的div在激活时正在移动所有标题菜单

Question

我一直在使用从 3.x 迁移的引导程序 4，现在一切正常，除了标题有一个问题，我有一个折叠的 div，用于搜索，激活时移动所有菜单并且是对用户来说不是一个很好的体验（请忽略屏幕截图中丑陋的边框，它们仅用于调试目的）。

这是正常的菜单

当我点击搜索图标时

我有另一个带有搜索表单的 Div

如果我们仔细观察，我们可以看到前一个 div 的大小更大，所有的项目都被移到了左边

更新：

这是该问题的动画 gif：

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

这是带有 HTML 布局代码的要点：https ://gist.github.com/ricardojriosr/1aa3f0c77c4d6786b42cce6d03a9c154

我该如何解决这个问题，所以菜单不会改变大小并将项目移动到左侧？提前致谢。

标签： htmlcsstwitter-bootstrap

Answer 1

你可以尝试添加

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

在你的 CSS 中。