Html 表格isn'；我没上正确的课

我正在编写一些代码，根据用户是想登录还是注册来隐藏和显示不同的表单。然而，由于某些原因，我的表单没有在html中显示在

之间，它甚至没有出现在html文档中。有人知道为什么吗

<div class="col-md-3">

    <button type="button" id="login" class="btn btn-default login hidden">Login</button>
    <button type="button" id="register" class="btn btn-default register">Register</button>
    <form class="login-inputs hidden">
        <h3>Login</h3>
        <div class="form-group">
            <label for="inputEmail">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>

登录
登记
登录
电子邮件
密码
记得我吗
登录

删除隐藏的类

媒体屏幕元素“开”和“关”等级：

---

只要使用这个类。此CSS已经有bootstrap 3。

@Christina，很抱歉拼写错误。不要使用hidden，它是bootstrap 3中的一个类，自使用jQuery以来，无论是否使用jQuery，它都会一直隐藏！重要的。使用另一个类，可能是基于cookie或其他方式创建一个类。表单没有包装在表单div标记中，隐藏的不是问题所在

/* For Phone device */
.visible-xs{
   display: block !important;
}
.hidden-xs{
   display: none !important;
}
/* For Phone device End */

@media (min-width: 768px){
   .visible-sm{
       display: block !important;
}
  .hidden-sm{
       display: none !important;
}

}
@media (min-width: 992px){
   .visible-md{
      display: block !important;
}
   .hidden-md{
      display: none !important;
}

}
@media (min-width: 1200px){
    .visible-lg{
       display: block !important;
}
    .hidden-lg{
       display: none !important;
}
}