![梅問題－[教學]Bootstrap Navbar導覽列選單太長時，可左右滑動切換選單](http://photo.minwt.com/img/Content/bootstrap/bootstrap-hor-navbar-scrolling/bootstrap-hor-navbar-scrolling_00.jpg)
Bootstrap內建許多功能與特效，而在眾多的功能中，最常被使用到的就是它的導覽列選單，除了會自動判斷螢幕尺寸，調整選單的型式，讓選單可以符合各裝置使用，甚至也支援子選單，同時完全無需寫到任何的CSS與JS，所有的選單結構都由HTML來設定，相當的方便。
但唯一讓梅干感到困擾的是，當選單過長時，就會出現折行，或是當太長時，就自動隱藏變成手機的漢堡選單，讓梅干感覺在操控上有些不便，因此那一天看到許多新聞網的選單，也是落落長但卻是透過左右滑動，來解決選單過長的問題，因此梅干就花了點時間，研究了一下並將Bootstrap的導藏列選單，過長時也可左右滑動，並且還支援多層選單，因此當你選單也太長的朋友，現在也一塊來看看囉！
Step1
首先，先產生Bootstrap導覽列選單，並加入選單，當超出選單範圍時，就會出現折行。
![梅問題－[教學]Bootstrap Navbar導覽列選單太長時，可左右滑動切換選單(支援多層選單)](http://photo.minwt.com/img/Content/bootstrap/bootstrap-hor-navbar-scrolling/bootstrap-hor-navbar-scrolling_01.jpg)
Step2
這時再加入，以下的CSS，強制選單不換行，以及讓overflow-x設為auto，這樣當選單超出範圍時，就可左右滾動，完全無需透過js，則是運用溢位這屬性來完成。
overflow-x: auto;
white-space: nowrap;
webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
white-space: nowrap;
webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
![梅問題－[教學]Bootstrap Navbar導覽列選單太長時，可左右滑動切換選單(支援多層選單)](http://photo.minwt.com/img/Content/bootstrap/bootstrap-hor-navbar-scrolling/bootstrap-hor-navbar-scrolling_02.jpg)
Step3
由於梅干支援次選單，因此這部分，就得透過JS來作控製，因此再將下方的JS放到jquery下方，就可實現當選單超出時，可左右滾動，當有次選單時，點選又可展開。
$(function(){ $('.navbar').after('<div id="nav-menu" class="container"></div>'); $('#nav-menu').append('<div class="collapse navbar-collapse"></div>'); $('.navbar-collapse').append('<div class="scroll"></div>'); $('.scroll').append($('.navbar-nav').clone(true)); $('#nav-menu .scroll>ul>li>ul').hide(); $('.navbar>div>.navbar-collapse').remove(); $('.caret').click(function(){ var visible = $(this).parent().next().is(":hidden");<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'#nav-menu .scroll>ul>li>ul'</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">hide</span><span style="color: #000000; font-weight: bold">();</span> <span style="color: #204a87; font-weight: bold">var</span> <span style="color: #000000">total</span> <span style="color: #ce5c00; font-weight: bold">=</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">height</span><span style="color: #000000; font-weight: bold">();</span> <span style="color: #204a87; font-weight: bold">if</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'#nav-menu .scroll'</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">height</span><span style="color: #000000; font-weight: bold">()</span><span style="color: #ce5c00; font-weight: bold">==</span><span style="color: #0000cf; font-weight: bold">50</span><span style="color: #000000; font-weight: bold">){</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">show</span><span style="color: #000000; font-weight: bold">();</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'#nav-menu .scroll'</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'height'</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #000000">total</span><span style="color: #ce5c00; font-weight: bold">+</span><span style="color: #0000cf; font-weight: bold">80</span><span style="color: #000000; font-weight: bold">);</span> <span style="color: #000000; font-weight: bold">}</span><span style="color: #204a87; font-weight: bold">else</span><span style="color: #000000; font-weight: bold">{</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'#nav-menu .scroll'</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'height'</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #4e9a06">'auto'</span><span style="color: #000000; font-weight: bold">);</span> <span style="color: #000000; font-weight: bold">}</span> <span style="color: #204a87; font-weight: bold">if</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">visible</span> <span style="color: #ce5c00; font-weight: bold">==</span> <span style="color: #204a87; font-weight: bold">true</span><span style="color: #000000; font-weight: bold">){</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">parent</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">next</span><span style="color: #000000; font-weight: bold">().</span><span style="color: #000000">show</span><span style="color: #000000; font-weight: bold">();</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'#nav-menu .scroll'</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">css</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">'height'</span><span style="color: #000000; font-weight: bold">,</span><span style="color: #000000">total</span><span style="color: #ce5c00; font-weight: bold">+</span><span style="color: #0000cf; font-weight: bold">80</span><span style="color: #000000; font-weight: bold">);</span> <span style="color: #000000; font-weight: bold">}</span> <span style="color: #000000; font-weight: bold">});</span>});
![梅問題－[教學]Bootstrap Navbar導覽列選單太長時，可左右滑動切換選單(支援多層選單)](http://photo.minwt.com/img/Content/bootstrap/bootstrap-hor-navbar-scrolling/bootstrap-hor-navbar-scrolling_03.jpg)
Step4
當有子選單時，點選後也會自動展開，因此當你網站選單也超長的朋友，不妨可試試看囉！如有任何問題，也歡迎回報。
![梅問題－[教學]Bootstrap Navbar導覽列選單太長時，可左右滑動切換選單(支援多層選單)](http://photo.minwt.com/img/Content/bootstrap/bootstrap-hor-navbar-scrolling/bootstrap-hor-navbar-scrolling_04.jpg)