如何使 Bootstrap 4 导航栏使用 flexbox

Question

我正在尝试让 Bootstrap 4 导航栏使用 flexbox。我几乎可以做到，但仍然有一些奇怪的 Javascript 问题。一切似乎都首先工作，但如果我切换一次打开导航栏然后关闭它，Bootstrap javascript 添加元素样式“高度：0px;”到 navbar-toggleable-{} 类。这使得元素定位不正确，因为我在父元素中使用“align-items：center”并且当高度设置为零时，元素顶部被认为是中心。如果我从元素中手动删除该样式，它会“修复”问题。

下图显示了我的问题：

这是唯一失败的情况。如果在我调整窗口大小时元素打开，则元素处于正常位置，并且 Javascript 没有添加额外的样式。如果我不打开折叠的导航栏，一切正常。

所以我的问题是，我如何实现实际工作并使用 flexbox 的 Bootstrap 4 导航栏？我想最简单的解决方法是停止 Bootstrap 向元素添加额外的样式。它不是必需的，因为如果该元素不可见，那么它无论如何都有“显示：无”。如果它是可见的，那么高度肯定不应该为零。

编辑： 我做了更多研究，发现如果我将 removeAttr('style') 添加到 Bootstrap javascript 中的正确位置，那么它似乎可以解决问题。但是，我不确定这是否是解决该问题的正确方法。

Answer 1

此问题已在 Bootstrap 4 Alpha 5 版本中得到修复。所以更新 Bootstrap 解决了这个问题。