Bootstrap Navbar Dropdown nicht immer öffnen

Question

Ich habe zwei Probleme mit Bootstrap Navbar Drop-down. Erstens funktioniert das Dropdown-Menü der Navigationsleiste nicht auf jeder Seite. Das Aussehen der Navbar ist unten abgebildet. Der Kalender ist ein Google-Kalender, der in die Seite eingebettet wird. Immer wenn ich auf den Kalenderlink klicke, funktioniert das Dropdown nicht. Wenn ich nach dem Klicken auf die Kalenderseite zu einer anderen Seite navigieren möchte, funktioniert das Dropdown auch nicht. Wenn ich jedoch zu einer anderen Seite navigiere und die Seite neu lade, funktioniert das Dropdown-Menü erneut. Irgendeine Idee, was dieses Problem verursachen könnte?

Das zweite Problem dreht sich um das Kollabieren der Navigationsleiste, wenn sich die Fenstergröße ändert. So wie ich es eingerichtet habe, sollte die gesamte Navigationsleiste zusammenbrechen, wenn die Bildschirmgröße weniger als 1200 Pixel beträgt. Wenn Sie auf die reduzierbare Schaltfläche klicken, sollte die Navigationsleiste auf eine Höhe von 85 Vh erweitert werden. Während die Navigationsleiste bei 1200px kollabiert, erstreckt sich das Reduzierbare nicht auf eine Höhe von 85vh, bis der Standardwert von 767px erreicht wird. Mein Code dafür ist unten gezeigt:

@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; 
    } 
} 

Irgendwelche Ideen?

Answer 1

In Bezug auf nicht reagierende Dropdown haben Sie wahrscheinlich einige Konflikte zwischen dem Kalender und Bootstrap Verhalten, vielleicht isoliert das Problem in einer Geige oder Teilen von Code würde helfen, es zu identifizieren.

Für Bootstrap 3.3.x hier ist die CSS Sie müssen Zusammenbruch wechseln auf 1200px:

@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

Eine weitere Alternative wäre die Variable $grid-float-breakpoint: zu $screen-lg-min !default; ändern (die 1200px ist) und Kompilieren über SASS, Standard ist 768px.