javascript - 如何使 Bootstrap 4 导航栏使用 Flexbox

Question

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

下图显示了我的问题:

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

所以我的问题是，如何实现实际工作并使用 Flexbox 的 Bootstrap 4 导航栏？我想最简单的解决方法是停止 Bootstrap 将额外的样式添加到元素中。这是不需要的，因为如果该元素不可见，那么它无论如何都有“display:none”。如果它是可见的，高度不应该为零。

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

Answer 1

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