[英]How to make Bootstrap 4 navbar to use flexbox
I'm trying to make Bootstrap 4 navbar to use flexbox. 我正在尝试使Bootstrap 4导航栏使用flexbox。 I was almost able to make it, but there is still some strange Javascript issue.
我几乎可以做到,但是仍然存在一些奇怪的Javascript问题。 Everything seems to work first but if I toggle open navbar once and then close it, Bootstrap javascript adds element style "height: 0px;"
一切似乎都首先起作用,但是如果我一次切换打开导航栏,然后将其关闭,Bootstrap javascript将添加元素样式“ height:0px;”。 to navbar-toggleable-{} class.
转到navbar-toggleable- {}类。 This makes element to be positioned improperly since I use "align-items: center" in parent element and when height is set to be zero, then elements top is thought to be the center.
由于我在父元素中使用了“ align-items:center”,因此当元素的高度设置为零时,元素top会被认为是中心,这会导致元素放置不正确。 If I manually remove that style from element, it "fixes" the problem.
如果我从元素中手动删除该样式,它将“解决”该问题。
Picture below is showing my problem: 下图显示了我的问题:
This is only case which is failing. 这只是失败的情况。 If element is open when I resize window up, element is in it's normal position and there is no extra style added by Javascript.
如果我在调整窗口大小时打开了元素,则元素处于其正常位置,并且Javascript没有添加额外的样式。 And if I don't open collapsed navbar ever, everything works.
如果我从不打开折叠式导航栏,则一切正常。
So my question is, how I could implement Bootstrap 4 navbar which is actually working and using flexbox? 所以我的问题是,我该如何实现实际上正在使用Flexbox的Bootstrap 4导航栏? I guess easiest fix is to stop Bootstrap adding that extra style to element.
我猜最简单的解决方法是停止Bootstrap向元素添加额外的样式。 It's not needed since if that element is not visible, then it has "display: none" anyway.
这是不需要的,因为如果该元素不可见,则无论如何它都具有“显示:无”。 And if it's visible, height shouldn't be certainly zero.
而且如果可见,高度不应该肯定为零。
Edit: I did some more research and found that if I add removeAttr('style') to right place in Bootstrap javascript, then it seems to fix the problem. 编辑:我做了更多的研究,发现如果我在Bootstrap javascript中的正确位置添加removeAttr('style'),那似乎可以解决问题。 However, I'm not sure if that is the right approach to fix that.
但是,我不确定这是否是解决问题的正确方法。
This problem was fixed in Bootstrap 4 Alpha 5 release. 此问题已在Bootstrap 4 Alpha 5版本中修复。 So updating Bootstrap solved the problem.
因此,更新Bootstrap解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.