El menú desplegable es un menú que ofrece una lista de opciones para elegir. El título del menú siempre se muestra y el resto de los elementos están ocultos. Es un menú alternable en el que se pueden mostrar todos los elementos haciendo clic en él.
El botón desplegable se puede colocar en el centro de la página configurando la propiedad «alinear texto» del div desplegable en el centro. El siguiente ejemplo contiene un menú desplegable simple de Bootstrap con una clase agregada «mi menú». La propiedad «text-align: center» se agrega a la clase.
Ejemplo: aquí, la propiedad «text-align: center» alinea el contenido del div desplegable al centro, lo que establece el botón desplegable en el centro.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<style>
.my-menu {
/*Sets all the content of dropdown div to center*/
text-align: center;
}
</style>
</head>
<body>
<!-- my-menu class is added to dropdown div for styling-->
<div class="dropdown my-menu">
<button class="btn btn-secondary
dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
<a class="dropdown-item"
href="#">Action 1</a>
<a class="dropdown-item"
href="#">Action 2</a>
<a class="dropdown-item"
href="#">Action 3</a>
</div>
</div>
<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>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA