En Bootstrap 4, NavBar es un componente esencial para los menús. NavBar contiene tantos elementos como texto, enlace de texto, deshabilitar el enlace, botones desplegables, formularios, etc. Para hacer que los subelementos desplegables ocupen el ancho completo, se pueden realizar utilizando las propiedades CSS o las utilidades predeterminadas de Bootstrap 4. Los siguientes enfoques explicarán claramente:
Enfoque 1:
- En Bootstrap 4, el menú desplegable de ancho completo en la barra de navegación podría ser posible agregando propiedades CSS internas o externas según las conveniencias. Concéntrese solo en el menú desplegable y el menú desplegable de clases.
- Primero enfoque el menú desplegable, que es la clase principal del menú desplegable, luego hágalo como estático en la posición de la siguiente manera:
<style>.dropdown {position:static !important;}</style> - Ahora, haga que el margen superior del menú desplegable sea cero píxeles y agregue ancho al 100%.
- Luego agregue la sombra del cuadro para resaltar el menú desplegable (propósito decorativo) de la siguiente manera:
<style>.dropdown-menu {box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;margin-top:0px !important;width:100% !important;}</style> - También podemos usar las propiedades CSS a través del método en línea.
Ejemplo 1: el siguiente ejemplo ilustra cómo hacer un menú desplegable de ancho completo de Bootstrap 4 en la barra de navegación usando las propiedades de CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.dropdown {
position: static !important;
}
.dropdown-menu {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
margin-top: 0px !important;
width: 100% !important;
}
</style>
</head>
<body>
<div class="fluid-container">
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeeks
</h1>
<b>Bootstrap 4 full width dropdown in Navbar</b>
<br>
<br>
<nav class="navbar navbar-expand-lg navbar-dark
justify-content-between text-white"
style="background-color: green;">
<a class="navbar-brand" href="#">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
width="30" height="30"
class="d-inline-block align-top" alt="">
GfG BS4 Navbar
</a>
<button class="navbar-toggler "
type="button" data-toggle="collapse"
data-target="#navbarNavDropdown01"
aria-controls="navbarNavDropdown01"
aria-expanded="false"
aria-label="Toggle navigation"
style="outline-color:#fff">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarNavDropdown01">
<ul class="navbar-nav ">
<!--dropdown item of menu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" id="navbarDropdown"
role="button" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown 01
</a>
<!--dropdown sub items of menu-->
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
Action 01
</a>
<a class="dropdown-item" href="#">
Action 02
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
More Content here
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown 02
</a>
<!--dropdown sub items of menu-->
<div class="dropdown-menu"
aria-labelledby="navbarDropdown"
style="max-width: 1366px;">
<a class="dropdown-item" href="#">
Action 01
</a>
<a class="dropdown-item" href="#">
Action 02
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
More Content here
</a>
</div>
</li>
</ul>
<!--Form item of menu for search purpose-->
<form class="form-inline ml-auto ">
<input class="form-control mr-sm-4"
type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-success my-4 my-sm-2 "
type="submit">Search</button>
</form>
</div>
</nav>
</center>
</div>
</body>
</html>
Salida:
”
Enfoque 2:
- En Bootstrap 4, el menú desplegable de ancho completo en la barra de navegación podría ser posible mediante el uso de las utilidades de Bootstrap 4.
- Similar al enfoque 1, enfóquese solo en el menú desplegable y el menú desplegable de clases.
- Agregando la clase position-static junto con la clase desplegable, que es la clase principal del menú desplegable de la siguiente manera:
<liclass="nav-item dropdown position-static"> - Ahora, agregue la clase w-100, mt-0 junto con la clase del menú desplegable de la siguiente manera:
<divclass="dropdown-menu mt-0 w-100 shadow border-outline-success"aria-labelledby="navbarDropdown">
Ejemplo 2: El siguiente ejemplo ilustra cómo hacer un menú desplegable de ancho completo de Bootstrap 4 en la barra de navegación usando las utilidades de Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="fluid-container"> <center> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <b>Bootstrap 4 full width dropdown in Navbar</b> <br> <br> <nav class="navbar navbar-expand-lg navbar-dark justify-content-between text-white" style="background-color: blue;"> <a class="navbar-brand" href="#"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" width="30" height="30" class="d-inline-block align-top" alt=""> GfG BS4 Navbar </a> <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown01" aria-controls="navbarNavDropdown01" aria-expanded="false" aria-label="Toggle navigation" style="outline-color:#fff"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown01"> <ul class="navbar-nav "> <!--dropdown item of menu--> <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 01 </a> <!--dropdown sub items of menu--> <div class="dropdown-menu mt-0 w-100 shadow border-outline-success" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#"> Another action </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> Something else here </a> </div> </li> </ul> <!--Form item of menu for search purpose--> <form class="form-inline ml-auto "> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-primary my-2 my-sm-0 " type="submit">Search</button> </form> </div> </nav> </center> </div> </body> </html>
Producción:
Referencia: https://getbootstrap.com/docs/4.0/components/navbar/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA