Ir para conteúdo
Artur Mendonça

Alinhar dropdown menu Bootstrap

Recommended Posts

Olá amigos,

estou desenvolvendo um site com bootstrap para uma associação sem fins lucrativos, mas não estou conseguindo alinhar o dropdown menu, pois quando clico em cima do botão as diversas opções aparecem mais à esquerda do botão; se encostar os outros botões a listagem fica alinhada mas não fica bem esteticamente.

 

Junto uma imagem para melhor esclarecimento. A imagem da esquerda é como fica e a direita é como pretendo que fique mas com os botões separados.

 

Muito obrigado-

 

Menu.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acrescente uma regra CSS para alterar a posição horizontal do submenu conforme mostrada a seguir:

ul.dropdown-menu {
  left: Npx; /* defina N, conforme sua necessidade, para deslocar o submenu na horizontal */
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pela resposta, mas o código que estou usando é o seguinte:

            <div class="dropdown">
            <button class="btn btn-outline-success dropdown-toggle btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>           
            <div class="dropdown-menu" align="center" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#"><b>Action</b></a>
                <a class="dropdown-item" href="#"><b>Another action</b></a>
                <a class="dropdown-item" href="#"><b>Something else here</b></a>    
            </div>            
            </div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui resolver este problema com o seguinte código:

 

<style>
.navbar {    
    background: #0047b3 !important;
}

.nav-link{
    color: white !important;
    font-weight: bold !important;
}

button{
    margin-left:15px !important;
    font-weight: bold !important;
}

.dropdown-menu {
    background-color: #2eb82e !important;
    left: 60px;
}

</style> 

<!-- para fixar o menu no topo deverá ser utilizado "fixed-top" na class navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a href="findex.php"><img src="../fimg/folk-01.png" style="width:200px; height:130px; margin-left: 0px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px" alt="logotipo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsite">
                <span class="navbar-toggler-icon"></span>
            </button>
    </div>
            
   
            <a href="findex.php"><button class="btn btn-outline-danger btn-lg" type="button">Página Inicial</button></a>
   
    <div class="dropdown">
            <button class="btn btn-outline-success dropdown-toggle btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
            </button>                   
        <div class="dropdown-menu" align="center" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#"><b>Action</b></a>
                <a class="dropdown-item" href="#"><b>Another action</b></a>
                <a class="dropdown-item" href="#"><b>Something else here</b></a>    
        </div>            
    </div> 

           

<button class="btn btn-outline-dark btn-lg" type="button">Entrar</button>

<button class="btn btn-outline-dark btn-lg" type="button">Entrar</button>


</nav>
<!-- Fim do menu de navegação -->

Mas agora o botão à esquerda do dropdown fica muito afastado. Já fiz diversas tentativas mas não consigo resolver para que fiquem todos à mesma distância. Junto uma imagem para exemplificar.

 

Se remover o código do dropdown os botões ficam todos à mesma distância uns dos outros. 

Menu.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por petrochinski
      Eu tive uma ideia muito boa, mas não consegui fazer ainda.
       
      A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse.
       
      Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse.
       
      Grato :)
    • Por Camila97
      Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js :
      //botão de excluir: let btn = document.createElement("button") btn.className = 'btn btn-danger' btn.innerHTML = '<i class="fas fa-times"></i>' btn.id = `id_despesa_${d.id}` btn.onclick = function(){ let id = this.id.replace('id_despesa_', ''); bd.remover(id) window.location.reload() } linha.insertCell(4).append(btn) console.log(d) Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa.
      Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?
    • Por gui127
      Oi, sou novo por aqui. Queria saber como eu posso fazer um menu de links e informações com abas usando imagens, tipo esse:


    • Por Gabriel Barros Santana
      Oi, estou com uma duvida. Estava criando um meno de categorias para um site e-commerce na tray.
      Porém estou lutando para editar na plataforma da tray. Tenho um menu horizontal com os subníveis vertical porém queria editar para alterar o estilo e conteúdo mas a tray ta sendo bem estranha para mim alguma ajuda ? 
       
      Queria mudar desse menu hover normal de lista do site "JP" pra esse mais dinâmico com um caixa maior e com foto de produtos como exemplo do site "casas bahia".
       


    • Por Gabriel_1
      Tenho duas containers.
      ambas com as mesmas propriedades, e com rows tabém com as mesmas,
      porém elas acabam se desalinhando.
      estou usando o bootstrap.
       
       
      https://www.w3schools.com/code/tryit.asp?filename=FZQ9W97R4SNN
      deixei o html no w3school.
      Obrigado xD

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.