Bootstrap 5如何为整个下拉菜单添加共享边框？

方法一：自定义CSS调整边框衔接 #

直接基于官方下拉结构修改，通过控制展开状态下的边框样式实现统一效果：

1. 给下拉外层容器添加自定义类（方便针对性编写样式）

<div class="dropdown dropdown-unified-border">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuBtn" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuBtn">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

2. 添加以下自定义CSS：

.dropdown-unified-border {
  position: relative; /* 确保菜单相对于容器定位，避免布局错位 */
}

/* 默认状态：菜单去掉上边框，与按钮无缝衔接 */
.dropdown-unified-border .dropdown-menu {
  border-top: none;
  margin-top: -1px; /* 抵消按钮下边框与菜单的间距 */
}

/* 展开状态：去掉按钮下边框，抹平相邻圆角统一视觉 */
.dropdown-unified-border.show .dropdown-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.dropdown-unified-border.show .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

核心逻辑是：默认状态下让菜单上边框消失并贴紧按钮，展开后去掉按钮的下边框，同时抹平两者相邻的圆角，视觉上就形成了统一边框的效果。

方法二：复用Input Group组件 #

如果不想编写过多自定义CSS，可以用Bootstrap内置的Input Group组件模拟实现：

<div class="input-group">
  <button class="btn btn-secondary dropdown-toggle border-0 rounded-0" type="button" id="inputDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="inputDropdownBtn">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

补充一行CSS调整菜单样式：

.input-group .dropdown-menu {
  border-top: none;
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

这里利用Input Group的统一边框作为外层框，去掉按钮自身边框，再让菜单贴紧容器边框，同样能实现统一边框的效果。

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