如何在 Bootstrap 4 中创建响应式导航栏侧边栏抽屉？

使用 Bootstrap 5 内置的 Offcanvas 组件

Bootstrap 5 Beta 3 引入了一个新的 Offcanvas 组件。该组件使创建侧边栏变得简单。

您可以在 Bootstrap 网站上查看此组件的使用示例。

在 Bootstrap 4 中创建响应式导航栏侧边栏抽屉

要在 Bootstrap 4 中创建响应式导航栏侧边栏抽屉，您可以使用折叠、堆叠药丸和 Flexbox 的组合。

首先创建一个具有容器流体类且高度为 100vh 的容器 div。

<div class="container-fluid h-100">
  ...
</div>

在容器 div 内，创建两行。第一行将包含侧边栏，第二行将包含主要内容。

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

侧边栏应该被赋予一个折叠类以默认隐藏它。您可以添加一个按钮来切换侧边栏的可见性。

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

对于主要内容，使用 col 类来填充剩余的可用空间。

<div class="col">
  ...
</div>

要使侧边栏粘性，将 Sticky-top 类添加到侧边栏的导航栏。

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

最后，添加一些 CSS 来设置侧边栏样式并使其响应。

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

这将使在宽度超过 768 像素的屏幕上，侧边栏宽度为 250 像素。

以上是如何在 Bootstrap 4 中创建响应式导航栏侧边栏抽屉？的详细内容。更多信息请关注PHP中文网其他相关文章！