2

Por padrão, o menu do componente dropdown do Bootstrap 4 é alinhado à esquerda com o botão que o abre:

Alinhamento padrão

Preciso alinhar o menu do dropdown com o centro do botão, de modo que fique assim:

inserir a descrição da imagem aqui

Encontrei a classe dropdown-menu-right que alinha à direita, mas não encontrei algo do tipo dropdown-menu-center para alinhar ao centro como na imagem acima.

Estou usando um dropdown básico do Bootstrap 4: https://codepen.io/tkrempser/pen/vwRjmK.

4
  • Adiciona o codigo do seu menu também para ficar mais facil te ajudar...
    – Lodi
    Commented 24/05/2019 às 13:43
  • @Lodi Adicionei o código. Commented 24/05/2019 às 14:03
  • Se o botão estiver no canto esquerdo, ao centralizar o menu, este irá sair da tela por causa da largura. Você quer mover o botão pra direita?
    – Sam
    Commented 24/05/2019 às 15:04
  • @Sam Eu vou colocar o botão dentro de um container depois de centralizado. Commented 24/05/2019 às 15:18

1 Resposta 1

2

Primeiro vc tem que deixar o container do dropdown com o a largura do maior conteúdo. para isso criei uma classe custom e coloquei o width como max-content.

Depois vamos ajustar o left e o transforme original do dropdown. Ele por default já tem essas propriedades, mas para centralizar vc precisa ajusta-las, da forma que eu fiz, independente do tamanho do conteúdo ele sempre vai centralizar no botão.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<style>
		.drop-custom.show {
			width: max-content;
		}
		.drop-custom.show .dropdown-menu {
			left: 50% !important;
			transform: translate3d(-50%, 38px, 0px) !important;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="dropdown drop-custom">
					<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</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here 12312312321</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .