Question

我试图有一个简单的登录屏幕，由于某种原因，我无法让输入框的宽度相对于我的模态的宽度。我可以手动设置宽度，但在调整大小时它们调整不正确。我正在使用HTML和Twitter Bootstrap。如果有人有任何建议，这将是一个很大的帮助！谢谢！

编辑：感谢@RobertC，我能够通过将容器类更改为容器流来解决问题。再次感谢！

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Html/JavaScript</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    $(window).on('load',function(){
        $('#logInModal').modal('show');
    });
</script>

</head>
    <body>


    <div class="modal" id="logInModal">


       <div class="modal-dialog">
        <div class="modal-content">
              <div class="modal-header">
                <a class="close" data-dismiss="modal">x</a>
                <h2>Log In</h2>
              </div> <!--ModalHEADER DIV-->
            <div class="modal-body">
              <div class="container">
                <form>
                  <div class="form-group">
                    <lable for="email">Email: </lable>
                    <input type="email" class="form-control" name="email">
                  </div> <!--1st Form-groupDIV-->
                  <div class="form-group">
                    <lable for="password">Password: </lable>
                    <input type="password" class="form-control" name="password">
                  </div> <!--2nd form-group DIV-->
                  <div class="checkbox">
                    <lable>
                      <input type="checkbox"> Keep Me Logged in
                    </lable>
                </div> <!--CHECKBOX DIV-->
                <div>
                  <a class="btn btn-primary" data-dismiss="modal" id="continueAsGuestBtn">Continue As Guest</a>
                    <a class="btn btn-success" id="logInBtn">Log In</a>
                </div>
                </form>
                  <div>
                    <p>New User? Create Accont <a data-toggle="modal" data-dismiss="modal" href="#signUpModal">Here</a>
                  </div>
              </div> <!--CONTAINER DIV-->
            </div><!--modalBODY DIV-->
        </div> <!--modalCONTENT DIV-->
      </div> <!--modalDIALOG DIV-->
    </div> <!--LogInMODAL DIV-->

输入区域比HTML / Bootstrap中的模态宽度延伸得更远

0 个答案: