Bootstrap 4 引导4下拉列表不工作
不确定是否只有我,我正在从bootstrap 3移动到v4,下拉列表不起作用,即使是从bootstrap v4下拉会话复制的最简单示例。下面的代码显示了一个按钮,可以单击,但不能下拉任何按钮。我发现在刷新后的0.01秒,我点击按钮,下拉菜单出现。但在这之后的任何时候,它都不起作用。这是我的密码 jsBootstrap 4 引导4下拉列表不工作,bootstrap-4,Bootstrap 4,不确定是否只有我,我正在从bootstrap 3移动到v4,下拉列表不起作用,即使是从bootstrap v4下拉会话复制的最简单示例。下面的代码显示了一个按钮,可以单击,但不能下拉任何按钮。我发现在刷新后的0.01秒,我点击按钮,下拉菜单出现。但在这之后的任何时候,它都不起作用。这是我的密码 js css HTML 行动 在Alpha 4.0.6中遇到了相同的问题 我已经将.dropdown样式fra bootstrap.css 3.3.7复制到dropdown.less中,并且成功
css
HTML
行动
在Alpha 4.0.6中遇到了相同的问题
我已经将.dropdown样式fra bootstrap.css 3.3.7复制到dropdown.less中,并且成功了
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.3em;
vertical-align: middle;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropup .dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #292b2c;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-divider {
height: 1px;
margin: 0.5rem 0;
overflow: hidden;
background-color: #eceeef;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: normal;
color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #1d1e1f;
text-decoration: none;
background-color: #f7f7f9;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #0275d8;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: #636c72;
cursor: not-allowed;
background-color: transparent;
}
.show > .dropdown-menu {
display: block;
}
.show > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 0.5rem 1.5rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #636c72;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 0.125rem;
}
不是有效的workaorund,但它可以工作:-)在Bootstrap 4中,
btn组
类不再用于下拉列表。使用父级的下拉列表
类:
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
行动
将此添加到jQuery代码中
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});
下拉列表构建在第三方库Popper.js上,该库提供动态定位和视口检测。确保在引导之前包含JavaScript。检查。根据@Zuul,Popper必须位于bootstrap.js之前。这就是我遇到的问题。是的,这很好,但也需要为版本4.4.1添加“$(This).toggleClass('show');”$('.dropdown')。单击(函数(){$('.dropdown菜单').toggleClass('show');$(this.toggleClass('show');});对我来说,问题是我忘了添加Js链接。
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.3em;
vertical-align: middle;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropup .dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #292b2c;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-divider {
height: 1px;
margin: 0.5rem 0;
overflow: hidden;
background-color: #eceeef;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: normal;
color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #1d1e1f;
text-decoration: none;
background-color: #f7f7f9;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #0275d8;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: #636c72;
cursor: not-allowed;
background-color: transparent;
}
.show > .dropdown-menu {
display: block;
}
.show > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 0.5rem 1.5rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #636c72;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 0.125rem;
}
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});