Bootstrap 5行内表单元素被折叠菜单挤下移问题求助

Bootstrap 5行内表单的折叠高级搜索菜单展开时，会将下方的box1和box2挤向下移动。尝试给.collapse设置position: absolute后，下拉菜单无法占满100%宽度，且点击高级搜索按钮时box1和box2会出现跳动。

通过以下调整解决布局冲突：

• 给折叠菜单的父容器添加position: relative，让绝对定位的折叠框以该容器为基准定位
• 移除.collapse的固定宽度，改用width: 100vw配合居中变换，确保菜单占满屏幕宽度且居中
• 允许表单容器溢出，避免折叠菜单被裁剪
• 调整层级确保折叠菜单在表单元素上方

修改后的CSS #

.search-form {
  border: 2px solid #000;
  overflow: visible; /* 允许折叠框超出容器范围 */
}

.advanced-search-container {
  position: relative; /* 作为绝对定位的参考容器 */
}

.collapse {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100vw; /* 占满屏幕宽度 */
  z-index: 10; /* 确保在其他表单元素上方 */
  top: 100%; /* 紧贴高级搜索按钮下方 */
}

/* 可选：限制折叠菜单的最大宽度，保持和原设计一致 */
.collapse .card {
  max-width: 1200px;
  margin: 0 auto;
}

修改后的HTML #

在包含高级搜索按钮和折叠框的col-auto容器上添加advanced-search-container类：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <!--Search form-->
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-10 bg-white search-form ">
                <form action="" class="form-inline d-flex">
                    <div class="row g-3 align-items-center">
                        <!-- 添加 advanced-search-container 类 -->
                        <div class="col-auto advanced-search-container">
                            <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
                                Advance Search With Filters <i class="fa fa-angle-down"></i>
                            </a>
                            <div class="collapse" id="collapseExample">
                                <div class="card card-body">
                                    <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>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <input type="password" id="inputPassword6" class="form-control" placeholder="box1" aria-describedby="passwordHelpInline">
                        </div>
                        <div class="col-md-3">
                            <input type="password" id="inputPassword6" class="form-control" placeholder="box2" aria-describedby="passwordHelpInline">
                        </div>
                        <div class="col-md-3">
                            <span id="passwordHelpInline" class="form-text">
                                Must be 8-20 characters long.
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bootstrap5 JavaScript-->
    <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>
</body>
</html>

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