Bootstrap4 Tutoriales básicos

Bootstrap4 Menú desplegable

Cuando el usuario coloca el cursor sobre o hace clic en el elemento desencadenante, generalmente se utiliza el menú desplegable dentro del título de navegación para mostrar la lista de enlaces relacionados. Puede usar el complemento desplegable de Bootstrap para agregar menús desplegables configurables a casi todo el contenido (como enlaces, botones o grupos de botones, barras de navegación, pestañas y navegación en píldoras, etc.) que se pueden abrir y cerrar con un clic, sin necesidad de escribir ningún código de JavaScript.]}

Bootstrap4 El menú desplegable depende de popper.min.js。

El menú desplegable es configurable, se muestra en formato de lista de enlaces contextual.

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2Menú desplegable</h2>
　　<p>La clase .dropdown se utiliza para especificar un menú desplegable。</p>
　　<p>.dropdown-clase menu para configurar el menú desplegable real.</p>
　　<p>Podemos usar un botón o enlace para abrir el menú desplegable, el botón o enlace necesita agregar .dropdown-toggle y data-propiedad toggle="dropdown"。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primario　desplegable-alternar"　data-toggle="dropdown">
　　　　　　Botón desplegable
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Ejemplo de análisis

clase .dropdown se utiliza para especificar un menú desplegable。

Podemos usar un botón o enlace para abrir el menú desplegable, el botón o enlace necesita agregar .dropdown-toggle y data-propiedad toggle="dropdown".

<div>elemento agregar .dropdown-clase menu para configurar el menú desplegable real, y luego agregar en las opciones del menú desplegable .dropdown-clase item.

También podemos usar en la etiqueta <a>:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
	<div class="dropdown">
	　　<a class="btn btn-secundario　desplegable-toggle" href="#" role="button" id="dropdownMenuLink" data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
		Dropdown link
	　　</a>
	　　<div　class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item"　href="#">Acción</a>
		<a　class="dropdown-item"　href="#">Otra　acción</a>
		<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Línea divisoria en el menú desplegable

.dropdown-divider clase se utiliza para crear una línea horizontal en el menú desplegable：

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>En el menú desplegable</h2>
　　<p>.dropdown-divider clase se utiliza para crear una línea horizontal en el menú desplegable：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primario　desplegable-alternar"　data-toggle="dropdown">
　　　　　　Botón desplegable
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a>
　　　　　　<div　class="dropdown-separador"></div>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Título del menú desplegable

.dropdown-La clase header se utiliza para agregar un título al menú desplegable：

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>En el menú desplegable</h2>
　　<p>.dropdown-La clase header se utiliza para agregar un título al menú desplegable：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primario　desplegable-alternar"　data-toggle="dropdown">
　　　　　　Botón desplegable
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a>
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Opciones disponibles y deshabilitadas en el menú desplegable

.active mostrará los elementos del menú desplegable en resaltado (añadiendo un fondo azul)。

Para deshabilitar las opciones del menú desplegable, se puede usar la clase .disabled。

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2Menú desplegable</h2>
　　<p>La clase .active mostrará los elementos del menú desplegable en resaltado (añadiendo un fondo azul)。</p>
　　<p>Si desea deshabilitar la opción del menú desplegable, puede usar la clase .disabled。</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primario　desplegable-alternar"　data-toggle="dropdown">
　　　　　　Botón desplegable
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item" href="#">Normal</a>
　　　　　　<a　class="dropdown-item active" href="#">Activo</a>
　　　　　　<a　class="dropdown-item disabled" href="#">Deshabilitado</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Posicionamiento del menú desplegable

<p>Si queremos que el menú desplegable se alinee a la derecha, podemos agregar la clase .dropdown al elemento:-Añadir .dropdown después de la clase menu-menu-clase right。

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2Menú desplegable</h2>
　　<p>Si queremos que el menú desplegable se alinee a la derecha, podemos agregar la clase .dropdown al elemento:-Añadir .dropdown después de la clase menu-menu-right 类。</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-primario　desplegable-alternar"　data-toggle="dropdown">
　　　　　　Botón desplegable
　　　　</button>
　　　　<div　class="dropdown-menu dropdown-menu-right">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Configuración de la dirección de despliegue del menú desplegable

La dirección de despliegue del menú desplegable se establece por defecto hacia abajo, por supuesto, también podemos configurar diferentes direcciones.

Especificar el menú desplegable que se despliega hacia la derecha

Si desea que el menú desplegable se despliegue hacia la derecha, puede agregar la clase "dropright" al elemento div:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2Menú desplegable</h2>
　　<p>La clase .dropright se utiliza para configurar que el menú desplegable se despliegue hacia la derecha:</p><br>
　　!--　Botón desplegable hacia la derecha predeterminado　-->
	<div　class="btn-grupo desplegable hacia la derecha">
	　　<button　type="button"　class="btn　btn-secundario　desplegable-alternar"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
		Desplegable hacia la derecha
	　　</button>
	　　<div　class="dropdown-menu">
		!--　Enlaces　del　menú desplegable　-->
		<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
　　　　　　　　</div>
	</div>
	!--　Botón desplegable dividido hacia la derecha　-->
	<div　class="btn-grupo desplegable hacia la derecha">
	　　<button　type="button"　class="btn　btn-secundario">
		Dividir desplegable hacia la derecha
	　　</button>
	　　<button　type="button"　class="btn　btn-secundario　desplegable-toggle　dropdown-toggle-split"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
		<span　class="sr-only">Activar Derecha</span>
	　　</button>
	　　<div　class="dropdown-menu">
		!--　Enlaces　del　menú desplegable　-->
		　<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Especificar el menú desplegable hacia arriba que se despliega

Si desea que el menú desplegable hacia arriba se despliegue hacia arriba, puede agregar la clase "dropup" al elemento div:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　　　<h2Menú desplegable</h2>
　　　　<p>La clase .dropup se utiliza para configurar que el menú desplegable se despliegue hacia arriba:</p><br><br><br><br><br><br><br><br>
　　!--　Botón desplegable hacia arriba predeterminado　-->
　　　　<div　class="btn-grupo desplegable hacia arriba">
　　　　<button　type="button"　class="btn　btn-secundario　desplegable-alternar"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
　　　　　　　　Desplegable hacia arriba
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　!--　Enlaces　del　menú desplegable　-->
　　　　　　　　<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
　　　　</div>
　　　　</div>
　　　　
　　　　!--　Botón desplegable dividido hacia arriba　-->
　　　　<div　class="btn-grupo desplegable hacia arriba">
　　　　<button　type="button"　class="btn　btn-secundario">
　　　　　　　　Dividir desplegable hacia arriba
　　　　</button>
　　　　<button　type="button"　class="btn　btn-secundario　desplegable-toggle　dropdown-toggle-split"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
　　　　　　　　<span　class="sr-only">Activar Desplegable</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　!--　Enlaces　del　menú desplegable　-->
　　　　　　　　<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Especificar el menú desplegable que se despliega hacia la izquierda

Si desea que el menú desplegable se despliegue hacia arriba, puede agregar la clase "dropleft" al elemento div:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="text-align:center;">
　　<h2Menú desplegable</h2>
　　<p>La clase .dropleft se utiliza para configurar que el menú desplegable se despliegue hacia la izquierda:</p><br>
　　!--　Botón izquierda desplegable por defecto　-->
	<div　class="btn-izquierda desplegable　grupal">
	　　<button　type="button"　class="btn　btn-secundario　desplegable-alternar"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
		Izquierda desplegable
	　　</button>
	　　<div　class="dropdown-menu">
		!--　Enlaces　del　menú desplegable　-->
		<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
	　　</div>
	</div>
<br><br><br>
	!--　Botón izquierda desplegable separada　-->
	<div　class="btn-izquierda desplegable　grupal">
	　　<button　type="button"　class="btn　btn-secundario">
		Izquierda desplegable separada"
	　　</button>
	　　<button　type="button"　class="btn　btn-secundario　desplegable-toggle　dropdown-toggle-split"　data-alternar="desplegable"　aria-tienepopup="true"　aria-expandido="false">
		<span　class="sr-sólo">Alternar izquierda</span>
	　　</button>
	　　<div　class="dropdown-menu">
		!--　Enlaces　del　menú desplegable　-->
		<a　class="dropdown-item"　href="#">Acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Otra　acción</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Aquí　otra　cosa</a>
　　　　　　　　<div　class="dropdown-separador"></div>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace separado</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Configuración de menú desplegable en el botón

Podemos agregar un menú desplegable en el botón:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　ejemplo</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>botón con menú desplegable</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primario">Primario</button>
　　　　<button　type="button"　class="btn　btn-primario　desplegable-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-secundario">Secundario</button>
　　　　<button　type="button"　class="btn　btn-secundario　desplegable-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-éxito">Éxito</button>
　　　　<button　type="button"　class="btn　btn-éxito　desplegable-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">Información</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">Advertencia</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">Peligro</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Bootstrap4 Plegable Bootstrap4 Tarjeta