No funciona el drop-down
en PHP Storm, utilicé Bootstrap
Estoy trabajando en el IDE PHP Storm, y con Bootsrap
4.3, sucede que coloqué un dropdown
en la navbar
con un menú para el inicio de sesión y el registro de cuentas; sin embargo al iniciar la página, el dropdown
no funciona.
Ya coloqué los link y scripts de Bootstrap
, pero sigue sin funcionar. Me gustaría que por favor me ayuden revisando mi código y me ayuden encontrando el problema por el cual no funciona el dropdown
.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown-menu .dropdown-item:active {
background: white;
}
.dropdown-menu .dropdown-item:hover {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light text-esencia fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand pt-2 pb-2" href="/">
<img src="{{asset('/img/Logo-Principal-2.png')}}" width="200" alt="Logo Esencia" title="Logo">
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" href="/">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/precios">Precios</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/contacto">Contáctanos</a>
</li>
</ul>
**
<!--AQUÍ COLOQUÉ EL DROPDOWN-->**
<div class="nav-item dropdown form-inline my-2 my-lg-0">
<a class="nav-link text-light dropdown-toggle" role="button" id="dropdownNavBar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user fa-2xl"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-light" href="/login">Ingresar</a>
<a class="dropdown-item text-light" href="/registro">Regístrarme</a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>