Bootstrap導航欄下拉並不總是開放

我有兩個Bootstrap導航欄下拉的問題。首先，導航欄的下拉菜單在每個頁面上都不起作用。下面顯示了導航欄的外觀。日曆是嵌入到頁面中的Google日曆。每當我點擊日曆鏈接本身，下拉菜單不起作用。如果我在點擊日曆頁面後嘗試導航到另一個頁面，則下拉菜單也不起作用。但是，如果我導航到另一個頁面然後重新加載頁面，則下拉菜單再次運行。任何想法可能導致這個問題？Bootstrap導航欄下拉並不總是開放

第二個問題出現在窗口大小改變時摺疊導航欄。按照我設置的方式，當屏幕尺寸小於1200像素時，整個導航欄應該會崩潰，單擊可摺疊應該將導航欄擴展到85vh的高度。雖然導航欄在1200px時摺疊，但摺疊後的寬度不會延伸到85vh的高度，直到達到767px的默認值。我的代碼如下所示：

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

任何想法？

來源

2016-11-27 S Mittal

你可以創建一個jsFiddle嗎？ – Legends

在問候反應遲鈍下拉你可能具有日曆和引導的行爲之間有一些矛盾，也許隔離問題小提琴或分享一些代碼將有助於識別它。

對於這裏舉3.3.x是你需要切換上1200像素崩潰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

另一種方法是改變變量$grid-float-breakpoint:到$screen-lg-min !default;（這是1200px）和通過SASS重新編譯，默認爲768px。

來源

2016-11-28 01:24:04 Syden

Bootstrap導航欄下拉並不總是開放

回答

相關問題