Bootstrap v 3.2組件顯示（摺疊水平面板）

我想創建一個固定頂級導航欄，採用移動優先設計方法並使用BS v 3.2。我也使用'less'作爲預編譯器。Bootstrap v 3.2組件顯示（摺疊水平面板）

因此我已經建立了一個導航欄，看起來像這樣的html：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <!-- And below is the dropdown menu toggle button which displays all elements visible in the non-collapsed version of the navbar--> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
... 
</nav>

上述工作正常。

在那裏我得到不過卡是在移動視圖，當用戶點擊上面的切換按鈕，我想了兩件事情：

1）切換下的下拉菜單的下降按鈕將不再出現（並且我已經很容易地發現了這部分）。

2）該下拉菜單中的內容將出現在從左側滑到設備顯示屏上的面板中，將所有其他內容推向右側。這對我來說是棘手的部分。

我懷疑爲了實現所需的行爲需要花費大量的精力重新編寫Bootstrap的JavaScript代碼，因此我很好奇，如果在面板元素上使用collapse.js可能是一個合適的選擇？我已經想通了如何使面板崩潰水平，而不是垂直（以下HTML）：

<div id="panel1" class="panel panel-default"> 
    <div id="collapseOne" class="panel-collapse collapse width"> 
     <div class="panel-body" style="width: 400px;"> 
     Content 
     </div> 
    </div> 
</div>

當我被困現在是菜單內容顯示block;即首先它將所有其他內容向下推，然後它在顯示器的頂部滑入/取消折疊。我希望它能將現有內容從屏幕的右側推出。

是否可以實現內聯顯示？我知道BS是特別關於容器 - 行列的，我試圖把兩個容器放在一起以便完成這項工作，但沒有運氣。我很可能做錯了一些事情。另外，如果面板不是最好的解決方案，我肯定會對其他人開放。請幫忙！！！

讓我知道我是否可以澄清任何事情。

乾杯，

來源

2014-10-04 Vercingetorix

嘗試使用Google搜索Offcanvas，Bootstrap幻燈片菜單，引導程序推送菜單進行搜索。 http://jasny.github.io/bootstrap/examples/navmenu/ http://startbootstrap.com/templates/simple-sidebar/ – Christina 2014-10-04 04:06:34

http://jsbin.com/seqola/1/edit – Christina 2014-10-04 04:10:10

http：// exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns - bootstrap是css和js，你可以添加其他的jQuery和CSS到它。有一個我見過的圖標欄推送菜單，但我無法找到它。 – Christina 2014-10-04 04:13:14

Jasny Bootstrap提供了上述功能。查看：http://jasny.github.io/bootstrap/components。

「關閉畫布」組件是我想要的。

乾杯。

編輯：在Harry的要求下（下面），這裏是使用Jasny Bootstrap組件的示例代碼。然而，您仍然需要將其庫納入您的項目。

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation"> 
... 
</nav> 
<div class="navbar navbar-default navbar-fixed-top"> 
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div>

來源

2014-10-04 13:42:21 Vercingetorix

很好，謝謝你承認評論隊友。乾杯:) – Harry 2014-10-06 15:24:26

Bootstrap v 3.2組件顯示（摺疊水平面板）

回答

相關問題