I want the form to disappear from the xs-sm context and I see a button that when I press the form, the problem works: when I place it in the md context, the form disappears and I have to reload so that appear and I do not know what he's doing wrong
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="boton-menu hidden-md-up" data-toggle="collapse" data-target="#menu-principal" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i></button>
<form action="#" method="post" class="collapse" id="menu-principal">
<div class="formulario">
<input type="text" class="formulario1" placeholder="Usuario" required name="usuario">
<input type="password" class="formulario2" placeholder="Contraseña" required name="contra">
<button type="submit" class="btn btn-primary">Ingresar</button>
<a href="" id="enlace">¿Olvidaste tu contraseña? Ingresa aquí.</a>
</div>
</form> Now this happens when I have it in the context sm and xs which is what I want
and clicking click collapses
but when going back to the context md this happens
