相关疑难解决方法(0)

试图实现这样的目标:https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

我在网上看过一些使用其他版本的bootstrap的例子,但它们都过多地改变了css,这使得学习bootstrap变得更加困难.

我想知道在Bootstrap 4中是否可以使用折叠,堆叠药丸,flexbox等工具来完成这项工作？

这是我可以实现的:https://jsfiddle.net/kL9u6esw/20/

我的Jsfiddle缺少什么:

1. 没有正确回应
2. 导航栏未使用粘性类正确滚动
3. 即使我设置了类,菜单按钮也不粘.
4. 背景调光器虽然不是答案所必需的,但会很棒

在我的例子中,我无法弄清楚如何插入导航栏,不确定它是否有必要正确响应.

还不确定将它作为列是否是正确的方法,它不应该是在画布外吗？

Html代码:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu …