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 Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By manolegal
      Boa tarde
      Gostaria de colocar o valor de um campo bootstrap/vue.js em uma variável php, porém não estou conseguindo. É a primeira vez que estou trabalhando com vue.
      O campo está trazendo o valor correto:
      <section class="scans"> <h2>Scans</h2> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for="scan in scans" key="scan.date" title="scan.content">{{ scan.content }}</li> </transition-group> </section> var app = new Vue({ el: '#app', data: { scanner: null, activeCameraId: null, cameras: [], scans: [] }, mounted: function () { var self = this; self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 }); self.scanner.addListener('scan', function (content, image) { var element = document.getElementById('valor'); element.innerHTML = content self.scans.unshift({ date: +(Date.now()), content: content }); }); Instascan.Camera.getCameras().then(function (cameras) { self.cameras = cameras; if (cameras.length > 0) { self.activeCameraId = cameras[1].id; self.scanner.start(cameras[1]); } else { console.error('Nenhuma Câmera conectada. Verifique!'); } }).catch(function (e) { console.error(e); }); }, methods: { formatName: function (name) { return name || '(unknown)'; }, selectCamera: function (camera) { this.activeCameraId = camera.id; this.scanner.start(camera); } } }); Preciso pegar o valor escaneado constante no campo, para passar para próximo formulário. No aguardo.
    • By joicitias
      Bom dia, 
      Ainda sou novata na área e estou criando um site com Bootstrap , JavaScript , e gostaria de uma ajuda. Crie alertas no form com o booststrap notify, entretanto a notificação de obrigatório aparece no topo da página e eu gostaria que ela aparecesse ao lado do campo. Como posso fazer isso?  


    • By Gilberto Jr
      Boa tarde;
       
      Eu estou com um probleminha aqui que eu não consegui resolver.
       
      O que eu quero, eu tenho uma pagina com 2 modal.
       
      Um modal dentro do outro.
      Exemplo: 
      Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL.
       
      E eu quero fechar somente o segundo modal que abre.
       
      Abaixo segue o meu codigo.
       
      <div class="modal fade" id="ListagemRede" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table text-center"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nome Rede</th> <th scope="col">Ação</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Rede 1</td> <td> <i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i> <!-- Modal Editar a Rede --> <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action="insere_rede.asp" id="forcadrede"> <div class="form-row"> <div class="form-group col-md-4"> <input type="hidden" name="master" value="1" required> <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label> <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label> <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required> <% set rscoord = conn.execute("select * from Inv_coord_grupo") %> <option selected>Escolher...</option> <% while rscoord.eof = false %> <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option> <% rscoord.movenext wend %> </select> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label> <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label> <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label> <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Status</label> <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required> <option selected>Escolher...</option> <option value="1">Ativo</option> <option value="0">Desativado</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button> <button type="submit" class="btn btn-primary btnsubmit">Salvar</button> </div> </form> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> Quem puder me ajudar.
       
      Att;
      Gilberto Jr
    • By gabybarross
      Amigos, preciso da ajuda de vocês. 
      Meu site vende um serviço e gostaria de saber como faço após a compra desse serviço que seja automaticamente incluído um perfil para o usuário. Isso porque gostaria de fazer um menu em que apenas quem comprou o serviço consiga visualiza-lo. 
      OBrigada gabriela
×

Important Information

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