Bootstrap布局问题：如何将两个下拉框并排置于搜索栏旁

没问题，我帮你搞定这个布局问题！

你当前的代码里，搜索栏被包裹在多层块级div中，而下拉框独立于这些div之外——块级元素默认会独占一行，所以它们只能上下排列。要让它们横向并排，我们只需要把搜索栏和下拉框放进同一个行内布局容器里就行，结合你用到的Bootstrap类，我给你两种方案：

方案1：用Bootstrap内置Flex类（推荐，更贴合你的现有代码） #

直接在外层套一个d-flex容器，同时添加垂直居中、间距的类，让布局更美观：

<div class="d-flex align-items-center gap-2">
  <!-- 搜索栏容器，添加flex-grow-1让它占满剩余空间 -->
  <div class="input-group flex-grow-1">
    <div class="icon-addon">
      <input type="text" id="search" class="form-control" placeholder='Type to filter the table...'>
      <label style="z-index: 22" for="search" class="fa fa-search" rel="tooltip" title="search"></label>
    </div>
  </div>
  <!-- 第一个下拉框 -->
  <select class="form-control" style="width: 105px;">
    <option>Festpreis</option>
    <option>Stundenbasis</option>
  </select>
  <!-- 第二个下拉框（你提到两个，我帮你补上结构） -->
  <select class="form-control" style="width: 105px;">
    <option>示例选项1</option>
    <option>示例选项2</option>
  </select>
</div>

关键改动说明： #

• d-flex：让容器内元素启用Flex布局，横向排列
• align-items-center：让搜索栏和下拉框垂直居中对齐，视觉更协调
• gap-2：给元素之间添加小间距，避免挤在一起
• flex-grow-1：让搜索栏容器自动占满剩余宽度，下拉框保持你设置的固定宽度

方案2：纯CSS Flex布局（如果没用到Bootstrap） #

如果你的项目没引入Bootstrap，用原生CSS也能实现同样效果：

<div style="display: flex; align-items: center; gap: 8px;">
  <div style="flex: 1;">
    <div class="input-group">
      <div class="icon-addon">
        <input type="text" id="search" class="form-control" placeholder='Type to filter the table...'>
        <label style="z-index: 22" for="search" class="fa fa-search" rel="tooltip" title="search"></label>
      </div>
    </div>
  </div>
  <select class="form-control" style="width: 105px;">
    <option>Festpreis</option>
    <option>Stundenbasis</option>
  </select>
  <select class="form-control" style="width: 105px;">
    <option>示例选项1</option>
    <option>示例选项2</option>
  </select>
</div>

注意事项： #

如果你的icon-addon类有自定义样式，记得检查是否有float或者display: block这类会破坏Flex布局的属性，有冲突的话调整一下就行。

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