Jump to content
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

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
    • By templateonweb
      Hi,
      Many of you want Bootstrap website templates. In this way, you have to develop a wonderful website.
      As this is the cheapest and fastest way to reach over the world. If you are interested in making a website by using Bootstrap website templates, then here I am sharing a website link that provides free website designs as Bootstrap website templates.
      If you are interested in then you can visit the site and use the best quality of Bootstrap website templates.
       
      Please visit: Bootstrap Website Templates
       
               
       
       
    • By Diego-SLP
      Bom dia.
       
      Estou fazendo uma tela a qual trará "blocos" que representarão minhas OBRAS, e dentro dessas OBRAS eu tenho os EQUIPAMENTOS que estou usando nela, estou tentando fazer para trazer todas em uma tela mas não consigo. 
      Os blocos que representam as OBRAS ok, aparecem corretamente, mas seus EQUIPAMENTOS não consigo "amarrar" a CHAVE daquele bloco para a pesquisa.
       
      Se alguem puder me ajudar agradeço. 
       
      <div class="row"><!--INICIO BLOCO DA OBRA--> <?php $procura = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento as equip, fr_obras.nome as obra, fr_obras.cod_obra as codobra FROM fr_movimentacao,fr_obras, fr_equipamentos WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip GROUP BY fr_obras.id" ) or die (mysqli_error($procura)); while($row = mysqli_fetch_array($procura)){ $cod_obra = $row['codobra']; ?> <div class="col-md-4"><!--col md 12--> <div class="card card-widget widget-user-2"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-gradient-secondary"> <div class="widget-user-image"> <img class="img-circle elevation-3" src="dist/img/icon-obra.png" alt="Obra"> </div> <!-- /.widget-user-image --> <h3 class="widget-user-username"><strong><?php echo $row['codobra'];?></strong></h3> <h6 class="widget-user-desc"><?php echo $row['obra'];?></h6> </div> <table class="table table-striped table-sm"> <thead> <tr> <th style="text-align: center;">Cod</th> <th style="text-align: center;">Equipamento</th> <th style="text-align: center;">Operador</th> <th style="text-align: center;">Ações</th> </tr> </thead> <tbody> <tr> <?php $procura2 = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento FROM fr_obras, fr_equipamentos, fr_movimentacao WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip AND fr_movimentacao.cod_obra = '".$cod_obra."' GROUP BY fr_equipamentos.cod_equip" ) or die (mysqli_error($procura2)); while($row2 = mysqli_fetch_array($procura2)){ ?> <td><?php echo $row2['codequip'];?></td> <td>RETRO</td> <td>José Silva</td> <td> <button type="button" class="btn btn-block bg-gradient-info">Movimentar</button> </td> <?php }?> </tr> </tbody> </table> </div> </div><!--col md 3--> <?php } ?> </div><!--FIM BLOCO DA OBRA-->  
    • By Diego-SLP
      Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! 
       
      Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço.
       
      <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>  
    • By Diego-SLP
      Bom dia,
      Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL.
       
      já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos.
       
       
      var $visitorsChart = $('#movimentacao') var visitorsChart = new Chart($visitorsChart, { data : { labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], datasets: [{ type : 'line', data : [100, 120, 170, 167, 180, 177, 160], backgroundColor : 'transparent', borderColor : '#007bff', pointBorderColor : '#007bff', pointBackgroundColor: '#007bff', fill : false // pointHoverBackgroundColor: '#007bff', // pointHoverBorderColor : '#007bff' }, { type : 'line', data : [60, 80, 70, 67, 80, 77, 100], backgroundColor : 'tansparent', borderColor : '#ced4da', pointBorderColor : '#ced4da', pointBackgroundColor: '#ced4da', fill : false // pointHoverBackgroundColor: '#ced4da', // pointHoverBorderColor : '#ced4da' }] }, meu PHP esta assim:
       
      $busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.