ブートストラップナビのタブとドロップダウンですか？

Question

私はここでは例として、次のJSフィドルを持っている：

オリジナルJSフィドル：

https://jsfiddle.net/dnovdk47/3/

私はNAVは等間隔に必要事項を記入してもタブが正当化されるように取得しようとしていますナビゲーションメニュー全体の私の他の問題は、ドロップダウンの幅とタブの幅を同じにする必要があるため、開いたときにドロップダウンがタブと並ぶようになります。私は100％にulのドロップダウンの幅を設定し、詰めのNavとフレックス

JSフィドルを使用することによって、これを達成することができました：

https://jsfiddle.net/dnovdk47/5/

CSS

.nav { 
    display: flex; 
    width: 100%; 
} 

.nav li { 
    background-color: #e3e3e3; 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 100%; 
} 

.navbar-inverse .navbar-nav li > a { 
    height: 45px; 
    justify-content: center; 
    align-items: center; 
    display: flex; 
} 

.navbar-inverse .navbar-nav li ul { 
    width: 100%; 
} 

しかし、基本タブでは、ドロップダウンテキストが大きく/太すぎ、ボックスの外に出ます。

私は希望のどのようなタブがドロップダウンの幅に等しいことができればです。もしそれができないのであれば、超長文テキスト/要素のために2行目にテキストをラップするだけかもしれません。

ここでは、すべてのタブとドロップダウンを動的にするために達成しようとしていることの写真を示します。

Answer 1

あなたは複数行にテキストを破るためにあなたのドロップダウンliに次のCSSを追加することができます。

.dropdown-menu>li>a{ 
    word-wrap: break-word; 
    white-space: inherit; 
    text-align: center; 
} 

JSFiddle：**「私はドロップダウン幅とタブ幅が同じ高されている必要があり、」@https://jsfiddle.net/dnovdk47/10/