英文:
Inline form elements being pushed down by collapsible menu
问题
我有一个Bootstrap 5的内联表单，其中有一个可折叠的菜单。
我在阻止可折叠的高级搜索菜单推动框1和框2下方方面遇到了困难（请参见代码片段）。
我已将.collapse的位置设置为绝对定位，但这会破坏布局（下拉菜单不会占满100%，框1和框2在单击高级搜索时会有点跳动）。您可能需要在全屏模式下查看片段以更清楚地看到问题。我已将.collapse的位置设置为绝对定位，但这在某种程度上会破坏下拉菜单的布局。如果能帮助解决这个问题，将不胜感激。已经在这个表单上卡了很久！
英文:
I have a bootstrap 5 form that is inline and which has a collapsible menu.
I am having difficulty stopping the collapsible advanced search menu pushing box 1 and 2 down (see code snippet).
I have set the .collapse with position absolute but this messes up the layout (the dropdown menu doesnt span 100% and box 1 and 2 kind of jump when the advanced search is clicked). You may need to view the snippet in full page mode to see the problem clearer.I have set the .collapse position to absolute but this does kind of disrupt the layout of the dropdown menu. Any help with getting this sorted would be much appreciated. Have been stuck on this form for ages!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.collapse{
position: absolute;
width: 1200px;
}
.search-form{
border:2px solid #000;
}
<!-- language: lang-html -->
<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">
<div class="col-auto">
<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>
<!-- end snippet -->
答案1
得分: 1
以下是您提供的代码的翻译部分：
[![在此输入图片描述][1]][1]你可以尝试这段代码，也许对你的问题有帮助。
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：null -->
<!-- 语言：lang-css -->
.search-form {
position: absolute;
border: 2px solid #000;
}
.collapse {
width: 100%;
}
<!-- 语言：lang-html -->
<!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>
<!-- 搜索表单 -->
<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">
<div class="col-auto">
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
高级搜索与筛选 <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="属性ID" class="form-control">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="按地图搜索">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="按国家搜索">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<input type="password" id="inputPassword6" class="form-control" placeholder="框1" aria-describedby="passwordHelpInline">
</div>
<div class="col-md-3">
<input type="password" id="inputPassword6" class "form-control" placeholder="框2" aria-describedby="passwordHelpInline">
</div>
<div class="col-md-3">
<span id="passwordHelpInline" class="form-text">
必须是8-20个字符长。
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap 5 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>
<!-- 结束代码段 -->
请注意，上面的翻译是您提供的代码的纯文本翻译，没有包括任何其他附加信息。
英文:
Can you please try this code may be this can be helpful to your question.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.search-form{
position: absolute;
border:2px solid #000;
}
.collapse {
width: 100%;
}
<!-- language: lang-html -->
<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">
<div class="col-auto">
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论