twitter-bootstrap-3 - Bootstrap nav 正当化された奇妙な反応の問題

Question

クッパの幅を下げると、ナビゲーションが積み重なって、素晴らしいスタートを切れます。これは素晴らしいことです。ウィンドウを開くと、ナビゲーション項目が 2 行に表示されます。これが写真です。

これはそれがどのように始まるかです：

http://reggi.myshopify.com/pages/about#

Answer 1

FWIW、.nav-justified問題の要素の再描画を強制すると、WebKit の理解に役立つことがわかりました。明らかに、これをどのように行うかはあなた次第fadeIn()です。

$(window).bind('resize', function(){
    var w = $(this).width(),
        threshold = 768;

        if(w < threshold){
            $('.nav-justified').hide().fadeIn();
        }
});

Answer 2

どちらの答えも欠けているようです。JS ソリューションは多くのちらつきを引き起こし、CSS ソリューションは設計されたタブの整合性を維持していないようです。これが私が思いついたものです。

ブートストラップ スタイルで less を使用していない場合は、@screen-sm を 768px に置き換えてください。

@media (min-width: @screen-sm) {
    .nav-tabs.nav-justified > li {
        display: block;
        float: left;
        width: 32.9999%
    }
}

Answer 3

これは Bootstrap の既知のバグです。

これは 2013 年以降 Chrome で修正されていますが、WebKit では未解決のバグであり、Safari で発生します。

Safari には、ブラウザーの水平方向のサイズを変更すると、更新時にクリアされる正当化されたナビゲーションでレンダリング エラーが発生するというバグが見られます。このバグは、正当化されたナビゲーションの例にも示されています。— cvrebert

使用しないことをお勧めします.nav-justified。または、Safari で正常に動作しない場合でも問題ありません。

Answer 4

問題はdisplay: table-cell;教室での指導.nav-justifiedです。

bootstrap.cssファイルを見てみましょうBootstrap version 3.0。4109 行目で を使用していると思います。

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }

次のように変更する必要があります。

@media (min-width: 768px) {
      .nav-tabs.nav-justified > li {
        display: inline-block;
        float: left;
        margin-left: 100px;
      }

}

これで問題は解決します。