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组件显示（折叠水平面板）

回答

相关问题