2016-10-27 21 views
0

私はflexboxを使うためにBootstrap 4 navbarを作ろうとしています。私はほとんどそれを作ることができましたが、まだ奇妙なJavascriptの問題があります。最初はすべて動作するようですが、開いたnavbarを一度切り替えて閉じると、Bootstrapのjavascriptは要素のスタイル「height:0px;」を追加します。 navbar-toggleable- {}クラスに追加します。これは、親要素に「align-items:center」を使用しているため、高さがゼロに設定されているため、要素topが中心であると考えられるため、要素を不適切に配置することになります。そのスタイルを要素から手動で削除すると、問題が「修正」されます。以下ブートストラップ4 navbarをflexboxを使う方法

絵は私の問題を示している。

enter image description here

これが失敗している場合のみです。私はウィンドウのサイズを変更するときに要素が開いている場合、要素は通常の位置にあり、Javascriptによって追加されたスタイルはありません。私が折り畳まれたナビゲーションバーを今まで開いていないと、すべてが機能します。

私の質問は、実際に動作しFlexboxを使用しているBootstrap 4 navbarを実装する方法です。 Bootstrapがその余分なスタイルを要素に追加するのを止めるのが最も簡単な解決策だと思います。この要素が表示されていない場合は、「表示:なし」と表示されるため、不要です。それが目に見える場合、高さは確かにゼロではありません。

編集: 私はいくつかの調査を行い、removeAttr( 'style')をBootstrap javascriptの適切な場所に追加すると、問題を修正するように見えます。しかし、それが正しい解決策であるかどうかはわかりません。

+0

[なぜすべてのフレックスボックスを使用しないのですか?](http://v4-alpha.getbootstrap.com/getting-started/flexbox/#how-it-works) – Vucko

+0

可能な限りブートストラップ4のすべてのコンポーネントではなく、フレックスボックスのサポートはまだありません。 – m5seppal

+0

アルファ6の時点で、navbarはflexbox – ZimSystem

答えて

1

この問題は、Bootstrap 4 Alpha 5リリースで修正されました。ブートストラップを更新することで問題は解決しました。

関連する問題