Problem with navbar collapse

0

I have a problem. By clicking on my button (I made the menu disappear when the screen is small) does not display the menu. I've been watching and reviewing the documentation and examples of Bootstrap for a while and I do not have the solution. Will anyone have any ideas to guide me?

I leave the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Estilos CSS -->
    <style type="text/css">
        .slider {
          background: url(images/slide0.jpg);
          height: 85vh;
          background-size: cover;
          background-position: center;
        }
    </style>
  </head>


  <body>

    <!-- Imagen Superior -->
    <section class="container-fluid slider d-flex justify-content-center align-items-center">
    <!-- d-flex sirve para alinear elementos uno al lado del otro-->
      <h1 class="display-4">AutoEdifica, un problema una solución!</h1>
    </section>

    <!-- Barra de Navegación -->
    <div class="container"> <!-- Dentro de div para tener margenes -->
      <!-- Barra de bootstrap azul (navbar-inverse bg-inverse) -->
      <!-- navbar-toggleable-md indica hasta cuando queremos que desaparezcan elmentos del menu -->
      <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
        <!-- Boton para Responsive, para que despliegue menu hacia abajo -->
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#id01" aria-controls="id01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
          <!-- Logo de la barra se ponen medida porque es img vectorizada -->
          <a class="navbar-brand" href="#">
            <img src="images/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="Logo"> AutoEdifica
          </a>

          <!-- Queremos que cuando la pantalla sea muy chica me siga manteniendo el logo en la barra por eso se coloca el div aqui -->
          <div class="collapse navbar-collapse justify-content-end" id="id01">
            <!-- Se podría poner ul y li o nav-items esta es mas nueva-->
            <div class="navbar-nav">
              <a href="" class="nav-item nav-link active">Nosotros</a>
              <a href="" class="nav-item nav-link">Asesorías</a>
              <a href="" class="nav-item nav-link">Preupuestos</a>
              <a href="" class="nav-item nav-link">Contacto</a>
            </div>
          </div>  
      </nav>   
    </div>




    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"</script>
  </body>
</html>
    
asked by Naoto 29.07.2017 в 20:25
source

1 answer

2

You have the tag that references the malformed bootstrap file:

<script src="js/bootstrap.min.js"</script>

When it should be:

 <script src="js/bootstrap.min.js"></script>
    
answered by 29.07.2017 / 20:34
source