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 Vitor Correa
      Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./../css/header.css"> <title></title> </head> <body> <header> <img src="./../img/fundo.png"> <nav> <ul> <li><a href="sla.html" class="active">Início</a></li> <li><a href="pps.html">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul> </nav> </header> </body> </html> img { width: 100px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-weight: bold; } li { float: left; border-right: 0px solid #333; } li: last-child { border-right: none; } li a { display: block; padding: 10px 15px; color: white; text-align: center; text-decoration: none; } li a:hover:not(.active){ background-color: #111; } .active { background-color: #FF0000; float: right; color: #111; }  
    • Por isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
    • Por mateumt15
      Tenho uma tabela com muitas linha e uma dessas linha e muito grande, ja tentei varias coisas para arrumar mas nenhuma delas deu jeito nisso segue a tabela
       
       
      <div class='wrapper-modal-editor'>
              <div class='block my-4'>
                  <div class='d-flex justify-content-center'>
                  </div>
              </div>
            <table id='dtBasicExample' class='table table-striped table-bordered table-responsive'>
              <thead>
                <tr>
                  <th class='th-sm'>Id Link
                  </th>
                  <th class='th-sm'>Link
                  </th>
                  <th class='th-sm'>Data Inicio
                  </th>
                  <th class='th-sm'>Data Fim
                  </th>
                  <th class='th-sm'>Ação
                  </th>
                  <th class='th-sm'>Dominio
                  </th>
                  <th class='th-sm'>Seleção
                  </th>
                </tr>
              </thead>    
              <div>
               
              <script src='../js/jquery-3.2.1.min.js'></script>
              <script src='../js/popper.min.js'></script> 
              <script src='../js/bootstrap-4.0.0.js'></script>
             
              </div>
          </div>
      <tbody>
      <tr>
      <td>27</td>
      <td>c.apple.com/r?v=2&amp;la=pt&amp;lc=bra&amp;a=z2%2Bnb8HWCoHziyJtbRYNxDd%2FkgyZjZvGSC81JOPXnypgazdDEpi9VZFGWHLJPWmuLtv6bjDTIDHd4zoATogPVtQ0TnXoWLHI2XQ1aVDI5YpHS0D4qfYHYB09Aq0qVHjRe8TR8%2Fo56d7spUwxrFdNL9jusvKWFiLfJBTgZkKsbI4pWRAyzrFaNxkIWNXu%2Fakj&amp;ct=aI3g7L0A3k</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      </tr>
      </table>
       
    • Por eduardojc
      Boa tarde pessoal, tenho uma tabela que busca os valores no meu MYSQL.

      Tenho um id ( 199917 ) por exemplo. Ele aparece 10x no meu banco de dados

      1 - 199917  data1 peso1
      2 - 199917  data2 peso2
      3 - 199917  data3 peso3
      ..... etc

      Precisaria retornar da seguinte forma minha tabela

      199917  - data1 peso1
                       data2 peso2
                       data3 peso3

      199939  - data1 peso1
                       data2 peso2
                       data3 peso3

      em anexo está as imagens, ficaria grato se puderem ajudar, dei uma pesquisada vi que tem rowspan, mas não faço ideia de como agrupar.

      Tabela 1 como está, tabela 2 como gostaria que ela fica-se

      meu Código:
      <div class="linha"></div> <div class="container"> <table class="table table-striped"> <thead class="thead-dark"> <tr> <th rowspan="1">Brinco</th> <th scope="col">Peso</th> <th scope="col">Data</th> <tr> </thead> @foreach($listagem as $lista) <tbody> <tr> <td rowspan="1">{{$lista->brinco_id }}</td> <td>{{$lista->peso }}</td> <td>{{ \Carbon\Carbon::parse($lista->data)->format('d/m/Y') }}</td> </tr> </tbody> @endforeach </table> </div>

    • 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 :)
×

Informação importante

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