導航欄下的Bootstrap Off Canvas菜單

Question

如果您覺得我要問的問題有點傻，請原諒我。

我正在嘗試使用Bootstrap NavBar和Off Canvas創建HTML頁面，發現該頁面的功能與我想要的完全相同。 在現有的基礎上，我需要一項額外的功能。

http://getbootstrap.com/examples/offcanvas/

如果您查看此鏈接，您將在頁面頂部看到導航欄，在右側的避風港上看到列表。 如果我們減小頁面導航欄的大小，它將變成菜單圖標，列表將消失。 此外，還將添加新按鈕以顯示隱藏列表。（請參見大屏幕圖像下方）

我需要的是移動在小屏幕上可見的鏈接/按鈕，應將其添加到導航欄的左側。 Simmiler是一種在小屏幕菜單上顯示的圖標。（請參見下面的小屏幕圖像）

大屏幕

小螢幕

Answer 1

您可以像這樣將切換按鈕放入導航欄中。

<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>
       <button type="button" class="navbar-toggle visible-xs pull-left" data-toggle="offcanvas">
                <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>

Codeply演示

Answer 2

嘗試使用按鈕上的pull-left類，而不是默認的pull-right類。

例如： http ： //www.bootply.com/274FaWMbMX

這種設計的缺陷在於，用戶單擊按鈕訪問菜單后，由於菜單展開，該按鈕不再可見。