Bootstrap Navbarドロップダウンが必ずしも開かない

Question

Bootstrapのnavbarドロップダウンに2つの問題があります。まず、各ページでnavbarからのドロップダウンが機能していない。 Navbarの外観を以下に示します。 カレンダーは、ページに埋め込まれているGoogleカレンダーです。カレンダーリンク自体をクリックするたびに、ドロップダウンは機能しません。カレンダーページをクリックして別のページに移動しようとすると、ドロップダウンも機能しません。しかし、別のページに移動してからページをリロードすると、ドロップダウンが再び機能します。この問題の原因は何でしょうか？

第2の問題は、ウィンドウサイズが変更されたときにnavbarを折りたたむことです。私はそれを設定している方法は、画面サイズが1200ピクセル未満のときに、全体のナビゲーションバーが崩壊し、折り畳みをクリックするとナビゲーションバーが85vhの高さに伸びるはずです。 navbarが1200pxで崩壊する間、collapsibleはデフォルトの767pxに達するまで85vhの高さまで伸びません。私のコードは以下の通りです：

@media screen and (max-width: 1200px) { 
    .navbar-collapse .nav > .divider-vertical { 
     display: none; 
    } 
    #nav-portallinks { 
     li a { 
      color: white; 
     } 
     li a:hover { 
      color: black; 
     } 
     .divider { 
      width: 25vw; 
      margin-left: 0; 
     } 
     font: { 
      family: $font-text; 
      size: 2vw; 
     } 
     max-height: 85vh; 
     overflow: auto; 
     background-color: $cardinal; 
     width: 25vw; 
     margin-left: 50vw; 
    } 
} 

アイデアはありますか？

Answer 1

反応しないドロップダウンに関しては、おそらくカレンダーとブートストラップの動作が矛盾している可能性があります。おそらく、フィドルで問題を特定したり、コードの一部を共有したりすることができます。ここでは、ブートストラップ3.3.xのために

あなたが1200pxに崩壊を切り替える必要があるCSSです：

@media (max-width: 1200px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

See working example

もう一つの選択肢は、（1200pxある）$screen-lg-min !default;に変数$grid-float-breakpoint:を変更することであろうと、 SASS経由で再コンパイルします。デフォルトは768pxです。