使頂部導航欄在無響應的引導程序模板中水平滾動

我有引導程序模板，使用this guide做出了非響應，一切正常。但是，當窗口大小較小時，頂部導航欄不會水平滾動。使頂部導航欄在無響應的引導程序模板中水平滾動

問題的例子也是that page。如果我們擠壓窗口大小比右上角的「鏈接」按鈕不可訪問。但指南本身說：

"Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content." 
"There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element."

響應功能並不是必需的，因爲許多建議的解決方案使頂部navbar行爲作爲響應。只是想問社區是否有任何一種解決方案，使頂部導航欄水平滾動頁面內容的其餘部分。

以下是目前的HTML結構

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header">.....</div> 
     <div class="navbar-collapse collapse pull-right">.....</div> 
    </div> 
</div>

來源

2014-12-04 hashmi

就像例如：「唯一的解決方案是響應式佈局或使用非固定元素。」 – Christina 2014-12-04 15:59:27

對，因爲沒有其他好的方法可以做到這一點，所以我必須選擇非固定寬度。因爲這是瀏覽器的默認行爲。 – hashmi 2014-12-05 10:59:39

你可以使用一些jQuery來添加一個滾動事件來移動一個div看到這個http://www.bootply.com/YUULBM3T7h 和jQuery是：

$(window).scroll(function(){ 
    $("#nav_div").css({"top": ($(window).scrollTop()) + "px"}); 
});

改變你的HTML：

<div id="nav_div" class="navbar navbar-default navbar-static-top""> 
    <div class="container-fluid"> 
     <div class="navbar-header">.....</div> 
     <div class="navbar-collapse collapse pull-right">.....</div> 
    </div> 
</div>

來源

2014-12-04 16:25:19 Bosc

我沒有打開這個問題使用jQuery。只有可能的解決方法是CSS。由於沒有可能的解決方案根據我的需要，我必須使用非固定寬度。但是這個jQuery解決方案完全按照我想要的方式工作。 – hashmi 2014-12-05 12:08:44

-2

你試過溢出-X：滾動？參考here

來源

2014-12-04 15:07:43

您能否介紹一下關於'overflow-x：scroll'的問題？這將爲您的答案增加一些內容，因爲它現在只是一個鏈接。 – 2014-12-04 15:10:03

我認爲'overflow-x：scroll'會爲該div添加一個單獨的水平滾動條，我根本不需要它。 – hashmi 2014-12-04 15:19:23

我的不好，「如果有任何一種解決方案可以使頁面內容的其餘部分水平滾動頂部導航欄，」誤解了這一點。由於您的導航欄已修復，因此可以縮放。嘗試.container-fluid {寬度：95％或95vw; – 2014-12-04 19:48:02

使頂部導航欄在無響應的引導程序模板中水平滾動

回答

相關問題