导航表的内容展开和折叠Bootstrap 4
阮阮
我在Bootstrap 4中使用按钮使“目录”展开和折叠时遇到问题。
这是我的代码：https : //codepen.io/nht910/pen/RwwwyKB
片段：
<div class="main-wrapper col-12">
<div class="post-wrapper">
<div class="post-body d-flex">
<div class="post-content">
<p>...</p>
</div>
<div class="post-toc">
<!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
</div>
</div>
你们能帮助我在折叠按钮中放置“目录”吗？单击它时，我们将显示如下图所示的动画。
非常感谢你们。
迪奥戈·佩雷斯（Diogo Peres）
要制作侧面菜单的动画，您必须制作一个transformation并使用滑动菜单translateX(100%);。然后，您可以添加transition: all 300ms;以获得滑动效果。
您还需要在滑动时更改侧面菜单的宽度，以便内容填充侧面菜单的空间。
我想我达到了您想要的效果，例如下面的示例：https : //codepen.io/diogoperes/pen/NWWWMYW
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在Bootstrap 3中实现的Foundation 4折叠主导航（又称抽屉）的示例？
- 2
Bootstrap 4响应式导航栏在xs宽度处折叠？
- 3
Bootstrap 4中的堆叠式可折叠导航栏
- 4
Bootstrap 4：如何控制可折叠内容？
- 5
自定义高度导航栏的Bootstrap 4折叠问题
- 6
Bootstrap 4-如何防止折叠菜单折叠导航中的所有元素
- 7
Bootstrap 4导航栏折叠不起作用[无法保持打开状态]
- 8
如何在Bootstrap 4中从Bootstrap 3中编写可折叠的导航栏？
- 9
Bootstrap 4导航栏/菜单在折叠时保持可见
- 10
Bootstrap 4导航栏-在导航链接中折叠，请点击香草JS
- 11
Bootstrap 4导航栏将内容下推
- 12
在Bootstrap 4中合并导航栏和轮播
- 13
bootstrap 4导航栏折叠不起作用（使用jQuery-popper-bootstrap
- 14
如何折叠Bootstrap 4导航栏
- 15
Bootstrap 4全部展开/全部折叠按钮在已显示折叠元素时不起作用
- 16
使用CSS或javascript折叠和展开html 4中的列表的最佳方法是什么
- 17
在导航栏元素外部单击或单击Bootstrap 4中的链接时，如何关闭打开的折叠导航栏？
- 18
全高页面上的 Bootstrap 4 & flex 和可折叠内容
- 19
Bootstrap 4 alpha 6：展开时并排折叠的两个 div 堆叠
- 20
Bootstrap 4 导航，左侧切换，右侧按钮从移动折叠中排除？
- 21
Bootstrap 4 卡片和导航
- 22
Bootstrap 4 Beta 2 - 导航栏：右对齐不折叠
- 23
Bootstrap 4 让导航栏项目始终在没有按钮的小屏幕上展开
- 24
Bootstrap 4 导航折叠动画在打开时停止一瞬间，可以关闭
- 25
即使不需要，元素也会在 bootstrap4 导航栏中折叠
- 26
Bootstrap 4 在移动设备上最右侧设置折叠切换器导航栏
- 27
Bootstrap 4 移动导航栏不会展开
- 28
通过直接访问展开 bootstrap 4 折叠菜单
- 29
Bootstrap 4 折叠的内容没有隐藏
我来说两句