正文：

在Web开发中，下拉菜单是常见的交互组件，尤其在管理后台或操作密集型页面中。Bootstrap提供了默认的下拉菜单样式，但其垂直排列的选项可能在某些场景下显得冗长。若能将操作项并排显示，不仅能节省空间，还能提升操作效率。以下是如何实现这一效果的实用指南。

1. 基础HTML结构

Bootstrap的下拉菜单通常由dropdown类构建。以下是一个标准的下拉菜单代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
    操作菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">编辑</a></li>
    <li><a class="dropdown-item" href="#">删除</a></li>
    <li><a class="dropdown-item" href="#">分享</a></li>
  </ul>
</div>

默认情况下，选项会垂直堆叠。为实现并排显示，需调整CSS。

2. CSS调整实现并排布局

通过覆盖Bootstrap的默认样式，将dropdown-menu中的列表项改为水平排列：

.dropdown-menu {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.dropdown-item {
  white-space: nowrap;
  padding: 0.5rem 1rem;
}

此代码将下拉菜单转换为水平布局，并确保选项文本不换行。若需添加分隔线，可使用border-right：

.dropdown-item:not(:last-child) {
  border-right: 1px solid #dee2e6;
}

3. 响应式适配

在小屏幕设备上，水平菜单可能导致溢出。可通过媒体查询切换为垂直布局：

@media (max-width: 576px) {
  .dropdown-menu {
    flex-direction: column;
  }
  .dropdown-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #dee2e6;
  }
}

4. 进阶优化

• 图标支持：为选项添加Font Awesome或Bootstrap图标，提升视觉提示。
• 悬停效果：通过:hover伪类增强交互反馈。
• 动态宽度：使用min-width确保菜单宽度适应内容。

5. 完整示例

以下是一个结合上述优化的完整代码：

<style>
.dropdown-menu {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.dropdown-item {
  white-space: nowrap;
  padding: 0.5rem 1rem;
}
.dropdown-item:not(:last-child) {
  border-right: 1px solid #dee2e6;
}
@media (max-width: 576px) {
  .dropdown-menu {
    flex-direction: column;
  }
  .dropdown-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #dee2e6;
  }
}
</style>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    快速操作
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i> 编辑</a></li>
    <li><a class="dropdown-item" href="#"><i class="bi bi-trash"></i> 删除</a></li>
    <li><a class="dropdown-item" href="#"><i class="bi bi-share"></i> 分享</a></li>
  </ul>
</div>

通过以上步骤，开发者可以轻松实现Bootstrap下拉菜单的并排显示，兼顾美观与功能性。