如何使 Bootstrap 4 导航栏使用 flexbox
How to make Bootstrap 4 navbar to use flexbox
我正在尝试让 Bootstrap 4 导航栏使用 flexbox。我几乎能够做到，但仍然存在一些奇怪的 Javascript 问题。一切似乎首先工作，但如果我切换打开导航栏一次然后关闭它，Bootstrap javascript 将元素样式 "height: 0px;" 添加到 navbar-toggleable-{} class。这使得元素定位不正确，因为我在父元素中使用 "align-items: center" 并且当高度设置为零时，元素顶部被认为是中心。如果我手动从元素中删除该样式，它 "fixes" 就是问题所在。
下图是我的问题：
这是唯一失败的案例。如果在我向上调整 window 大小时元素处于打开状态，则元素处于其正常位置并且 Javascript 没有添加额外的样式。如果我不打开折叠的导航栏，一切正常。
所以我的问题是，如何实现 Bootstrap 4 导航栏，它实际上可以工作并使用 flexbox？我想最简单的解决方法是停止 Bootstrap 向元素添加额外的样式。不需要它，因为如果该元素不可见，那么无论如何它都有 "display: none" 。如果它是可见的，高度不应该是零。
编辑：
我做了更多研究，发现如果我将 removeAttr('style') 添加到 Bootstrap javascript 中的正确位置，那么它似乎可以解决问题。但是，我不确定这是否是解决该问题的正确方法。
此问题已在 Bootstrap 4 Alpha 5 版本中修复。所以更新 Bootstrap 解决了问题。
我正在尝试让 Bootstrap 4 导航栏使用 flexbox。我几乎能够做到，但仍然存在一些奇怪的 Javascript 问题。一切似乎首先工作，但如果我切换打开导航栏一次然后关闭它，Bootstrap javascript 将元素样式 "height: 0px;" 添加到 navbar-toggleable-{} class。这使得元素定位不正确，因为我在父元素中使用 "align-items: center" 并且当高度设置为零时，元素顶部被认为是中心。如果我手动从元素中删除该样式，它 "fixes" 就是问题所在。
下图是我的问题：
这是唯一失败的案例。如果在我向上调整 window 大小时元素处于打开状态，则元素处于其正常位置并且 Javascript 没有添加额外的样式。如果我不打开折叠的导航栏，一切正常。
所以我的问题是，如何实现 Bootstrap 4 导航栏，它实际上可以工作并使用 flexbox？我想最简单的解决方法是停止 Bootstrap 向元素添加额外的样式。不需要它，因为如果该元素不可见，那么无论如何它都有 "display: none" 。如果它是可见的，高度不应该是零。
编辑： 我做了更多研究，发现如果我将 removeAttr('style') 添加到 Bootstrap javascript 中的正确位置，那么它似乎可以解决问题。但是，我不确定这是否是解决该问题的正确方法。
此问题已在 Bootstrap 4 Alpha 5 版本中修复。所以更新 Bootstrap 解决了问题。