如何为Bootstrap 5构建的垂直左侧菜单顶部添加黑色背景

你当前的代码将整个侧边栏都设置了bg-dark灰色背景，要实现顶部独立黑色背景的效果，只需拆分侧边栏结构，对顶部品牌区域和下方菜单区域分别设置样式即可，无需大量自定义CSS，配合Bootstrap自带工具类就能实现需求：

修改要点 #

• 拆分原侧边栏容器，最外层容器只保留宽度、弹性布局相关属性，移除原有的bg-dark、p-3属性
• 新增独立的顶部品牌区块，添加黑色背景、内边距属性实现目标效果：如果使用Bootstrap5.1及以上版本可直接用自带的bg-black类，如果使用你当前引入的5.0.2版本，可加一句自定义样式实现纯黑背景
• 下方菜单区域单独设置bg-dark、p-3保留原有样式

完整修改后代码 #

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 补充font-awesome引入，否则fa图标无法正常显示 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<!-- 适配Bootstrap5.0版本的纯黑背景自定义样式 -->
<style>
.bg-black {
  background-color: #000 !important;
}
</style>
</head>
<body>
<!-- 最外层侧边栏容器 -->
<div class="d-flex flex-column vh-100 flex-shrink-0" style="width: 250px;">
  <!-- 顶部黑色品牌区 -->
  <div class="bg-black p-3">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
      <svg class="bi me-2" width="40" height="32"> </svg>
      <span class="fs-4">BBBootstrap</span>
    </a>
  </div>
  <hr class="m-0">
  <!-- 下方菜单区域 -->
  <div class="bg-dark p-3 flex-grow-1">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a>
      </li>
    </ul>
    <hr>
  </div>
</div>
</body>
</html>

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