我想解决一个非常简单的引导问题。
根据指南（https://getbootstrap.com/docs/4.0/components/dropdowns/ https://getbootstrap.com/docs/4.0/components/dropdowns/) the .dropdown-menu类和下拉切换必须包含在.dropdown，或另一个声明的元素position: relative;.
但到目前为止，我只能让它工作，如果我把.dropdown-menu与我的开关处于同一水平。因此，我只能在右上角找到一个小的下拉菜单，如下所示。
但是，如果我要移动整个.dropdown-menudiv 块向下两级（在.input-group .dropdowndiv 块），我会达到这样的效果......
...这正是我想要的，但是，在控制台上，bootstrap/popper 会输出一个错误，告诉我Cannot read property 'setAttribute' of undefined，并且下拉菜单将不再缩回，这就是我陷入困境的地方。
我在底部包含了一个工作代码示例（第一张图片）供您尝试，请告诉我我使用的下拉类是否错误？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我已经找到了解决问题的方法，但后来我遇到了另一个问题，首先，这是代码。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
我所做的是我已经删除了两者.input-group-append分区和.btn-groupdiv，并有我的.dropdown-menu就在下面.dropdown，以及与菜单处于同一级别的切换。一切正常......期待.input-group / .btn-group现在的风格已经被破坏了。
如果不手动使用CSS类来覆盖它们，我的类结构与以前的版本是否有什么问题导致它无法实现我想要实现的功能？
使包含btn-group position:static像这样...
https://www.codeply.com/go/6kJ3E53PuF https://www.codeply.com/go/6kJ3E53PuF
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group position-static">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
怎么运行的：
The dropdown-menu在 Bootstrap 4 中是position:absolute，并且默认情况下，btn-group is position:relative. A position:absolutea 内的元素position:relative容器的大小是相对于容器的。然而，当一个position:absolute元素被放置在 a 内position:static容器，它将不再相对于容器调整大小。这允许dropdown-menu调整全宽的大小dropdown. 请参阅绝对内部相对与静态的示例 https://www.codeply.com/go/ZAVmUrU5AS.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
