Bootstrap教學-Navbar導覽列選單太長,自動隱藏選單並出現選單按鈕

梅問題-Bootstrap教學-Navbar導覽列選單太長時,自動出現選單按鈕
  Bootstrap除了廣告輪播很方便也很好用外,Navbar導覽列也是時常會使用到的功能之一,透過內建的機制,可以將導覽列置頂,甚至將選單齊左、齊右,以及在手機版時,還會自動隱藏選單,變成選單按鈕的形式呈現,而最近梅干在幫一個客戶開發頁時,發現到選單有點長,當在平板瀏覽時,橫向沒問題當橫向時,選單就會被擠到第二排,但又不能減少選單的數量,因此讓梅干思考了很久,最後就是當選單過長時,就自動隱藏並出現選單按鈕,與手機裝置一樣,如此一來就可解決此問題,因此也有遇到此問題的朋友,現在也一塊來看看囉!

Step1
首先,先將導覽列的選項先建立好。
梅問題-Bootstrap教學-Navbar導覽列選單太長時,自動出現選單按鈕
Step2
接著將下面的CSS樣式,複製到Style中。
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Step3
完成後,當平板直向時,選單的長度大於平板寬度,就會自動隱藏導覽列的選單,並出現選單鈕啦!當橫向時就可正常的顯示選單。
梅問題-Bootstrap教學-Navbar導覽列選單太長時,自動出現選單按鈕
[範例預覽]

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    BLUE 說道:

    回應:
    那就得把原來在手機的CSS樣式,複製一份到平板的解析下,就會有一樣的效果了