Bootstrap5实现折叠切换按钮与搜索输入框同行显示

问题说明 #

在使用Bootstrap5搭建带搜索表单的网站时，无法让标注为“Search by Country”的输入框与可折叠汉堡切换按钮在垂直方向上处于同一行，尝试设置form为inline和d-inline-flex均无效，期望实现两者同行的布局。

解决方案 #

核心问题是原结构中汉堡按钮和输入框的列容器未被统一放在row内，导致块级元素自动换行。通过以下调整实现同行布局：

• 将汉堡按钮与目标输入框的容器包裹在同一个row中，借助Bootstrap网格系统实现横向排列
• 为外层row添加align-items-center类，确保按钮与输入框垂直居中对齐
• 调整内边距参数，优化垂直方向的视觉协调度

修改后的完整代码 #

<!Doctype html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 bg-white search form">
      <form method="post" action="">
        <!-- 新增row容器包裹按钮和输入框，添加align-items-center实现垂直居中 -->
        <div class="row align-items-center">
          <div class="col-md-2 p-3 py-3">                
            <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
              Hamburger
            </a>
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder="Search by Country">  
          </div>     
        </div>
        <div class="collapse p-3" id="collapseExample">
          <div class="row">
            <div class="col-md-4">
              <input type="text" placeholder="Property ID" class="form-control">  
            </div>
            <div class="col-md-4">
              <input type="text" class="form-control" placeholder="Search by MAP"> 
            </div>
            <div class="col-md-4">
              <input type="text" class="form-control" placeholder="Search by Country">  
            </div>        
          </div>
        </div>     
      </form>
    </div>          
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
</body>
</html>

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