Html 在Bootstrap 4中制作可折叠的侧边栏导航？

我想知道是否有人可以帮助我开始如何创建一个边栏导航像上。我想买一个模板，然后用这种方式浏览代码，但我认为它附带了很多东西，可能会让我感到困惑

我正在努力理解如何在大屏幕上实现这一点

或

但在手机上你会看到汉堡菜单

到目前为止，我得到了这个

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-2 collapse d-md-flex bg-light pt-2 h-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-cog"></i>
                        <span class="badge badge-dark">4</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Analytics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Export</a>
                </li>
            </ul>
        </div>
        <div class="col pt-2">
            <div class="row w-100">
                <div class="col-12 pt-2" style="background:coral;">
                </div>
            </div>
            <div class="row w-100">
                fakdfkaf
            </div>
        </div>
    </div>
</div>

fakdfkaf

这应该让您开始：

#侧边栏{
最大宽度：240px；
}
#侧栏导航{
宽度：100%；
}
@介质（最大宽度：768px）{
#边栏{
最大宽度：48px；
}
#侧栏：导航链接跨距{
位置：绝对位置；
不透明度：0；
}
}
@介质（最大宽度：576px）{
#边栏{
最大宽度：0；
溢出x：隐藏；
}
}

概念证明（我必须调整您的标记）：

body，html{height:100%；}
#边栏{
最大宽度：240px；
}
#侧栏导航{
宽度：100%；
}
@介质（最大宽度：768px）{
#边栏{
最大宽度：48px；
}
#侧栏：导航链接跨距{
位置：绝对位置；
不透明度：0；
}
}
@介质（最大宽度：576px）{
#边栏{
最大宽度：0；
溢出x：隐藏；
}
}

fakdfkaf

侧边栏很复杂，因为场景太多。。覆盖内容、推送内容、流体或固定宽度、固定/粘性位置、响应性大/移动布局、可滚动、可切换、左/右、多级等。。我最近回答了一个问题。。但我怀疑你不会得到模板中显示的答案。我知道4.0发布时可能会让你开始，但我认为这个问题太宽泛了。谢谢，我已经看过你的代码并理解了。我不知道关于Bootstrap4，我想它已经准备好了。实际上我更喜欢使用CSS3网格，但我需要支持IE11。我在看bulma，因为它看起来很简单，但我不知道IE11是否支持（网站上说，如果你需要IE支持，你可能会选择boostrap）。@chobo2，的确如此。具有这将是一个很好的一段时间，直到v4达到它的浏览器兼容性，例子，模板，插件，你的名字。。。v4现在只有一个良好的开端。你需要更多才能使用它。当然，除非你能弥补它的不足。您能解释一下为什么要使用CSS网格吗？我听到很多人这样说，尤其是当他们的CSS知识不够扎实的时候。这真的让我很困惑。嗨，Andrei，我想知道在生产环境中，你是否仍然推荐Bootstrap3而不是Bootstrap4。从我去年年底的经验来看，我倾向于同意你的看法，但我想知道今年新的Bootstrap 4更新是否改变了你的想法。@Kyle，这取决于很多因素。在项目大小上，项目的目标受众（浏览器、设备）取决于您需要多少定制以及您需要什么插件。另外，您需要支持哪些浏览器？这还取决于你（或你的前端工程师）在解决任何问题方面的技能。我的口号是：“一切皆有可能，否则我做错了。”）我已经6个月没有接触过v3了，但我仍然认为对于中型和大型项目来说，使用v3成本更低、效率更高，而且至少还会持续6个月。@Kyle，read and。