Solución:
los btn-group
La clase ya no se usa para menús desplegables en Bootstrap 4. Use la dropdown
clase para el padre:
<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="https://foroayuda.es/#">Action</a>
<a class="dropdown-item" href="https://foroayuda.es/#">Another action</a>
<a class="dropdown-item" href="https://foroayuda.es/#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://foroayuda.es/#">Separated link</a>
</div>
</div>
Experimentó el mismo problema con Alpha 4.0.6.
He copiado los estilos .dropdown fra bootstrap.css 3.3.7 en dropdowns.less y funcionó.
.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;
}
No es un workaorund válido pero funciona 🙂
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)