我有一个非常简单的引导问题想要解决。
根据指南 ( https://getbootstrap.com/docs/4.0/components/dropdowns/ ),.dropdown-menu
类和 dropdown-toggle 必须包装在 .dropdown
中,或者声明 position:relative;
。
但到目前为止,只有将 .dropdown-menu
放置在与切换开关相同的级别,我才能使其正常工作。因此,我只能在右上角找到一个小的下拉菜单,如下所示。
但是,如果我要将整个 .dropdown-menu
div block 向下移动两级(在 .input-group .dropdown
div block 内),我就能达到这样的效果...
...这正是我想要的,但是,在控制台上,bootstrap/popper 会抛出一个错误,告诉我无法读取未定义的属性“setAttribute”
,并且下拉列表菜单将不再缩回,这就是我陷入困境的地方。
我在底部包含了一个工作代码示例(第一张图片)供您尝试,请告诉我我使用的下拉类是否错误?
<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
div 和 .btn-group
div,并保留了 .dropdown -menu
位于 .dropdown
正下方,并且切换按钮与菜单位于同一级别。一切正常...期望 .input-group
/.btn-group
样式现在被破坏了。
如果没有手动使用CSS类来覆盖它们,我的类结构与以前的版本是否有什么问题导致它无法实现我想要实现的功能?
最佳答案
制作包含 btn-group
position:static
像这样...
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>
工作原理:
dropdown-menu
在 Bootstrap 4 中是 position:absolute
,默认情况下,btn-group
是 position:relative
。一个position:absolute
position:relative
内的元素容器的大小是相对于容器的。然而,当 position:absolute
元素被放置在 position:static
内容器,它将不再相对于容器调整大小。这允许 dropdown-menu
调整 dropdown
的全宽。 See this example of absolute inside relative vs. static .
关于css - Bootstrap4下拉菜单填充输入组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49748947/