如何用Bootstrap实现响应式侧边栏并解决标题块溢出问题

问题说明 #

需要在屏幕左侧创建指定宽高的侧边栏，包含用户头像、头像右侧的用户名/职位信息，下方添加若干标题项。当前遇到标题块溢出侧边栏的问题，需用Bootstrap解决并实现响应式效果。

原代码参考 #

HTML #

<div class="block">
    <div class="left-part">
      <img src="assets/user.jpeg" alt="User Picture">
    </div>
    <div class="right-part">
      <div class="user-name">user</div>
      <div class="user-status">Operator</div>
    </div>
    <div class="titles">
        <div class="title">
          <i class="fas fa-check-circle"></i>
          Title1
        </div>
        <div class="title">
          <i class="fas fa-check-circle"></i>
          Title2
        </div>
        <div class="title">
          <i class="fas fa-check-circle"></i>
          Title3
        </div>
    </div>
</div>

SCSS #

.block{
    margin-top: 0%;
    display: flex;
    //align-items: center;
    position: absolute;
    width: 219px;
    height: 599px;
    left: 0px;

  
  .left-part {
    margin-top: 10px;
    margin-right: 14px;
    margin-left: 14px;
  }
  
  .left-part img {
    width: 69 px;
    height: 80px;
   // border-radius: 50%;
   // object-fit: cover;
  }
  
  .right-part {
    margin-top: 10px;
    flex-grow: 1;
    margin-right: 15px;
  }
  
  .user-name {
    font-size: 18px;
    font-weight: bold;
  }
  
  .user-status {
    font-size: 18px;
    margin-top: 5px;
  }
  .title {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 5px;

    i {
      margin-right: 5px;
    }
  }
}

组件调用 #

<div>
    <app-side-bar></app-side-bar>
</div>

解决方案 #

1. 核心问题分析 #

原代码中.block使用display: flex但未指定flex-direction: column，导致用户信息区和标题区被横向排列，超出侧边栏宽度引发溢出。

2. Bootstrap重构实现 #

修改后的HTML结构

<!-- 移动端折叠侧边栏 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">侧边栏</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body d-flex flex-column h-100">
    <!-- 用户信息区域 -->
    <div class="d-flex align-items-center mb-4 p-2">
      <div class="me-3">
        <img src="assets/user.jpeg" alt="User Picture" class="rounded" style="width: 69px; height: 80px;">
      </div>
      <div class="flex-grow-1">
        <div class="fw-bold fs-5">user</div>
        <div class="fs-6">Operator</div>
      </div>
    </div>
    <!-- 标题列表区域（溢出自动滚动） -->
    <div class="flex-grow-1 overflow-auto">
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title1
      </div>
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title2
      </div>
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title3
      </div>
    </div>
  </div>
</div>

<!-- 桌面端固定侧边栏 -->
<div class="d-none d-lg-block position-fixed top-0 start-0 w-[219px] h-[599px] bg-white border-end">
  <div class="d-flex flex-column h-100 p-3">
    <!-- 用户信息区域 -->
    <div class="d-flex align-items-center mb-4">
      <div class="me-3">
        <img src="assets/user.jpeg" alt="User Picture" class="rounded" style="width: 69px; height: 80px;">
      </div>
      <div class="flex-grow-1">
        <div class="fw-bold fs-5">user</div>
        <div class="fs-6">Operator</div>
      </div>
    </div>
    <!-- 标题列表区域（溢出自动滚动） -->
    <div class="flex-grow-1 overflow-auto">
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title1
      </div>
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title2
      </div>
      <div class="d-flex align-items-center mb-2">
        <i class="fas fa-check-circle me-2"></i>
        Title3
      </div>
    </div>
  </div>
</div>

<!-- 移动端触发按钮 -->
<button class="d-lg-none btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas">
  打开侧边栏
</button>

简化后的SCSS（仅保留自定义样式）

// 自定义滚动条样式
.overflow-auto::-webkit-scrollbar {
  width: 6px;
}
.overflow-auto::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

组件调用保持不变

<div>
    <app-side-bar></app-side-bar>
</div>

3. 关键优化点 #

• 布局修正：用d-flex flex-column让侧边栏内容垂直排列，彻底解决横向溢出问题
• 溢出处理：给标题区域添加overflow-auto，内容超出时自动显示滚动条
• 响应式适配：
  • 桌面端：固定宽高的侧边栏（w-[219px] h-[599px]匹配需求），固定在屏幕左侧
  • 移动端：使用Bootstrap Offcanvas组件，点击按钮展开/收起侧边栏，适配小屏幕空间
• 样式复用：用Bootstrap内置类（fw-bold、fs-5、me-3等）替代自定义CSS，减少冗余代码

内容的提问来源于stack exchange，提问作者ingmbk