將菜單更改爲小設備上的按鈕

所以我是新手引導。我已經在GitHub上檢查了這個網站上的這個例子：https://github.com/twbs/bootstrap/tree/master/docs/examples/dashboard 將菜單更改爲小設備上的按鈕

這是我需要的一點。我可以稍微調整一下，使它適合我的需求，除了一個。有一個鏈接邊欄。當你縮小屏幕尺寸時（如在移動設備上發生的情況），該側邊欄消失。我想確保側邊欄消失，但用按鈕重新顯示。就像這個例子中的頂部導航一樣。這裏從一個代碼片段（不是所有重要的是我認爲）

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Dashboard</a></li> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Help</a></li> 
     </ul> 
     <form class="navbar-form navbar-right"> 
     <input type="text" class="form-control" placeholder="Search..."> 
     </form> 
    </div> 
    </div> 
</nav> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-3 col-md-2 sidebar"> 
     <ul class="nav nav-sidebar"> 
     <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Reports</a></li> 
     <li><a href="#">Analytics</a></li> 
     <li><a href="#">Export</a></li> 
     </ul> 
     <ul class="nav nav-sidebar"> 
     <li><a href="">Nav item</a></li> 
     <li><a href="">Nav item again</a></li> 
     <li><a href="">One more nav</a></li> 
     <li><a href="">Another nav item</a></li> 
     <li><a href="">More navigation</a></li> 
     </ul> 
     <ul class="nav nav-sidebar"> 
     <li><a href="">Nav item again</a></li> 
     <li><a href="">One more nav</a></li> 
     <li><a href="">Another nav item</a></li> 
     </ul> 
    </div>

所以<nav>隱藏在更小的設備，並形成了一個菜單按鈕

另外一個側面的問題，這是什麼意思詠歎調。我見過幾個詠歎調類......但不確定它的意思。

來源

2015-04-01 DutchEcho

你到底要???小屏幕導航欄上的將轉換爲您訪問菜單的位置的三個欄。 – 2015-04-01 10:27:47

如果你想顯示或基於屏幕分辨率，你可以做你的CSS如下隱藏要素：

@media (max-width: 767px) { 
     .nav-sidebar { 
     display: none; 
     } 
    } 
    @media (min-width: 767px) { 
     .nav-sidebar { 
     display: block; 
     } 
    }

代碼會顯示屬於類nav-sidebar只有當元素的寬度屏幕至少爲767px。

你可以找到你正在嘗試在這裏做一個完整的例子：http://bootsnipp.com/snippets/featured/responsive-navigation-menu

來源

2015-04-01 10:40:00 Danilo

這確實是我在找的東西。非常感謝：） – DutchEcho 2015-04-01 11:18:32

將菜單更改爲小設備上的按鈕

回答

相關問題