试图实现这样的目标: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 缺少什么:
- react 不正确
- 导航栏无法使用粘性类正确滚动
- 即使我设置了类，菜单按钮也不粘。
- 背景调光器，虽然不是回答所必需的，但会很棒
在我的示例中，我不知道如何插入导航栏，不确定它是否有必要正确响应。
也不确定将其作为列是否是正确的做法，它不应该在 Canvas 外吗？
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
</button>
</div>
<div class="col-12">
Lorem...
</div>
</div>
</div>
</div>
</div>
最佳答案
Bootstrap 5 Beta 3(2021 年更新)
现在有一个官方 Bootstrap 5 Offcanvas Component这使得创建侧边栏更加容易。 当然，它仍然可以在不使用 Offcanvas 组件的情况下完成，例如 Bootstrap 5 的边栏示例
Bootstrap 4(原始答案)
侧边栏导航可能非常复杂。这可能就是 Bootstrap 没有“开箱即用”组件的原因。 侧边栏有很多注意事项:
- 自适应 - 根据屏幕宽度改变宽度、可见性或方向？
- 多层次 - 导航项是否有子层次？这将如何影响高度？
- 可切换 - 侧边栏可以通过按钮或“汉堡包”切换吗？
- 推送与叠加 - 页面内容是隐藏在侧边栏后面还是旁边？
- 左还是右 - 边栏是在页面内容的左边还是右边？
- 固定或粘性 - 侧边栏在页面滚动时如何定位？
- 动画风格 - 向左/向右/向上/向下滑动？、折叠？
在这种“侧边栏”的情况下...不是在右栏上使用 col-auto，而是使用 col。这样它会在菜单折叠时填充宽度:https://jsfiddle.net/0rhyzu7o/
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
..
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
..
</div>
</div>
</div>
</div>
</div>
为了使动画更流畅一些，您必须重写通常在高度上起作用的 Bootstrap 的折叠过渡
编辑:
根据赏金要求，我更新了侧边栏，增加了 2 个示例。这些更接近 example ，并且主要使用 Bootstrap 类。
最小版本
这个版本更接近示例，并且具有相同的左右滑动“抽屉”动画。
body {
height: 100vh;
overflow-x: hidden;
padding-top: 56px;
}
.vh-100 {
min-height: 100vh;
}
.sidebar.collapse.show,
.sidebar.collapse.show + .col {
transition: .18s ease;
transform: translate(0,0,0);
left: 0;
}
.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
transition: .18s ease;
transform: translate(-25%,0,0);
z-index: 1050;
left: -25%;
}
演示最小版本:https://codeply.com/go/w1AMD1EY3c
完整版(非常接近example):
这个侧边栏的特点:
- 固定宽度
- 在较小的屏幕上自动关闭，在较宽的屏幕上打开
- 可以在任何宽度下打开/关闭
- 响应式 - 成为较小宽度的固定叠加层
这个完整版本确实需要更多的 CSS，但其中一些是可选的...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
height: 100vh;
overflow-x: hidden;
padding-top: 55px;
}
/* set the sidebar width */
.w-sidebar {
width: 200px;
max-width: 200px;
}
.row.collapse {
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
}
.row.collapse.show {
margin-left: 0 !important;
}
.row.collapsing {
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
}
/* optional */
.vh-100 {
min-height: 100vh;
}
/* optional for overlay sidebar on small screens */
@media (max-width:768px) {
.row.collapse,
.row.collapsing {
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
}
.row > .sidebar.collapse {
display: flex !important;
margin-left: -100% !important;
transition: all .3s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
}
.row > .sidebar.collapse.show {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
}
.row > .sidebar.collapsing {
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
}
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
</div>
<div class="col px-2 px-md-0">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
<i class="fa fa-bars fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="container-fluid px-0 h-100">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p class="lead">Try this is full-page view to see the animation on larger screens!</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>完整版演示:https://codeply.com/go/XJE8LOdX8k
minimal和 robust示例更接近 original example .更改颜色和调整样式很容易。这是 sidebar overlaying the toggle bar 的另一个变体在顶部。
关于html - 在 Bootstrap 中创建响应式导航栏侧边栏 "drawer"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48996084/