如何在CSS中使用Bootstrap制作响应式侧边栏_Bootstrap flex类与media queries

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用Bootstrap制作响应式侧边栏_Bootstrap flex类与media queries

2025-11-28

浏览次数：次

返回列表

使用Bootstrap Flex类和Media Queries可创建响应式侧边栏：桌面端并排显示侧边栏与主内容，移动端隐藏侧边栏并添加按钮展开；通过d-flex、flex-shrink-0、flex-grow-1布局，结合d-none d-md-block控制显示，配合自定义CSS和J*aScript实现切换，确保良好用户体验。

如何在css中使用bootstrap制作响应式侧边栏_bootstrap flex类与media queries

要使用Bootstrap创建一个响应式侧边栏，可以结合Bootstrap的flex工具类和自定义media queries来实现。这种布局在桌面端显示侧边栏和主内容并排，在移动端则让侧边栏隐藏或堆叠到上方，提升用户体验。

使用Bootstrap Flex类构建基本结构

Bootstrap 5内置了强大的flexbox工具类，能快速搭建响应式布局。你可以用d-flex、flex-column、flex-shrink-0等类控制侧边栏和主区域的排列方式。

示例结构如下：

<div class="d-flex">
  <div class="bg-dark text-white p-3 flex-shrink-0" style="width: 250px;">
    <h5>侧边栏</h5>
    <ul class="n* flex-column">
      <li class="n*-item"><a href="#" class="n*-link text-white">首页</a></li>
      <li class="n*-item"><a href="#" class="n*-link text-white">设置</a></li>
      <li class="n*-item"><a href="#" class="n*-link text-white">帮助</a></li>
    </ul>
  </div>
  <div class="p-4 flex-grow-1">
    <h2>主内容区</h2>
    <p>这里是页面主要内容。</p>
  </div>
</div>

说明：外层容器使用d-flex启用弹性布局，侧边栏固定宽度并设置flex-shrink-0防止压缩，主内容使用flex-grow-1自动填充剩余空间。

通过Media Queries实现响应式行为

在小屏幕上，你可能希望侧边栏默认收起，或者变为顶部导航。这时可以添加自定义CSS media queries进行控制。

例如，当屏幕小于768px时隐藏侧边栏，只保留一个按钮用于展开：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100vh;
    transition: left 0.3s;
    z-index: 1000;
    background-color: #333;
  }
  .sidebar.active {
    left: 0;
  }
  .content {
    margin-left: 0;
  }
}

配合J*aScript控制显示状态：

<button class="btn btn-primary d-md-none" onclick="toggleSidebar()">☰ 菜单</button>

<script>
function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('active');
}
</script>

注意：d-md-none让按钮仅在中等以下屏幕显示，而侧边栏在大屏上始终可见（无需JS控制）。