1

Coloquei na barra de menu uma opção com "dropdown", só que quando eu clico, fica bugada no site (vai para linha de baixo)

<!DOCTYPE HTML>

<html>

<head>
    <title>Brown Odontologia</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--- zoom desativado para o usuario -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!----fonts google------->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
	.bs-example{
    	margin: 50px;
    }
</style>
<script>
    $(document).ready(function(){
        $(".dropdown-toggle").dropdown();
    });  
</script>
</head>
<body class="container">
    <!--------------------------------------------------------- Menu ------------------------------------------------------------>

    <div class="row justify-content-md-center">
        <header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
            <h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
            <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
            <h6>SEU SORRISO É NOSSA MISSÃO</h6>
            <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
            <a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
            <a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
            <a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
            <a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>

    <div class="btn-group">
        <button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">WhatsApp</a>
            <a href="#" class="dropdown-item">Telefone</a>
        </div>
    </div>

    
     
        </header>
    </div>

1 Resposta 1

0

Caique vc está tendo um conflito de Frameworks... Vc está indexando o Bootstrap 3 e o 4 ao mesmo tempo! Se vc não indexar o Bootstrap 3 o menu funciona normalmente. Além disso, vc está indexando o Bootstrap 4 2x assim como o FontAwesome tb 2x.

inserir a descrição da imagem aqui

Nessa resposta eu apenas removi o BS3, pois não faz sentido algum usar os dois ao mesmo tempo, pois eles compartilham várias classes com nomes igual, mas estilos diferentes. Até pq vc não está indexando o JS do versão 3 apenas o JS da versão 4, então praticamente não há problema em remover o .css do BS3.

<!DOCTYPE HTML>

<html>

<head>
  <title>Brown Odontologia</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--- zoom desativado para o usuario -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!----fonts google------->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->

  <style>
    .bs-example {
      margin: 50px;
    }
  </style>

</head>

<body class="container">
  <!--------------------------------------------------------- Menu ------------------------------------------------------------>

  <div class="row justify-content-md-center">
    <header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
      <h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
      <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
      <h6>SEU SORRISO É NOSSA MISSÃO</h6>
      <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
      <a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
      <a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
      <a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
      <a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>

      <div class="btn-group">
        <button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">WhatsApp</a>
          <a href="#" class="dropdown-item">Telefone</a>
        </div>
      </div>



    </header>
  </div>
  <script>
    $(document).ready(function () {
      $(".dropdown-toggle").dropdown();
    });
  </script>
</body>

</html>

2
  • vlws hugocsl como sempre nos ajudando com seu conhecimento :D
    – caiquesey
    Commented 23/04/2019 às 15:52
  • @caiquesey não há de que 💪
    – hugocsl
    Commented 23/04/2019 às 15:59

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 .