0

我有一个非常正常的布局，左侧边栏中的导航，右侧的主要内容。Bootstrap 的工作方式是，当屏幕太窄时，导航菜单位于顶部，而内容位于其下方。

但我觉得这非常难看。当我有实际内容要显示时，我不想在导航上浪费太多空间。我想要的是左侧有一个非常窄的栏或按钮，当你触摸它时，一个模态导航菜单会从左侧滑出。

我找不到任何关于如何在引导程序中实现这一点的信息。没有示例或教程，也没有其他文档。

我遇到的一些问题：当我将它作为网格的一部分进行时，它会在小屏幕上流到顶部，我显然不希望这样。当我把它作为主要内容的一部分时，它离屏幕边缘太远了；我想要它在屏幕的边缘。此外，它会随着主要内容滚动，我希望它保持原样。我猜是绝对定位。

还有一个问题，这应该只发生在小屏幕上。在大屏幕上，它现在的方式是完美的。因此，通常在大屏幕上可见的侧边栏应该被隐藏并在小屏幕上作为模态滑入。而且我什至没有看到任何横向滑动或折叠的组件。

那么你是怎么做到的呢？Bootstrap有可能吗？

4

3 回答 3

2

没有任何插件，你可以这样做。

https://jsfiddle.net/syamacl45/mcekfnpt/

$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({
        'width': 'toggle'
    }, 350);
});
于 2017-08-06T17:57:50.087 回答
0

是的，这确实是可能的。有一个名为 jPanelMenu 的 jQuery 插件：

http://jpanelmenu.com/

它是开源的，在 github 上！

希望这可以帮助！

于 2013-02-11T05:44:57.877 回答
0

您可以使用本示例中所示的非画布菜单：http: //bootply.com/94838

当浏览器宽度较窄时，侧边栏会折叠，可以通过单击左侧的箭头来展开。

于 2013-11-18T12:47:23.893 回答