我有一个非常简单的引导问题,我想解决。
根据指南(https://getbootstrap.com/docs/4.0/components/dropdowns/),.dropdown-menu
类和下拉菜单切换必须包含在.dropdown
或其他声明position: relative;
的元素中。
但是到目前为止,如果我将.dropdown-menu
置于与我的切换相同的级别,我只能让它工作。因此,我只能在右下角得到一个小的下拉列表。
但是,如果我将整个.dropdown-menu
div块向下移动两个级别(在.input-group .dropdown
div块内),我会实现这样的效果......
...这正是我想要的,但是,在控制台上,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
div和.btn-group
div,并将.dropdown-menu
权限置于.dropdown
下,并进行了切换与菜单处于同一级别。一切正常......期待.input-group
/ .btn-group
样式现在已经毁了。
没有手动使用CSS类来覆盖它们,我的类结构与以前的版本有什么不对,导致它无法实现我想要实现的功能吗?
答案 0 :(得分:1)
像这样包含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>
工作原理:
Bootstrap 4中的dropdown-menu
为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