Question

我有一个背景，但我也试图让我的表格适合屏幕，以便它不会越过屏幕。

以下是背景图片的代码

  <style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("https://i.imgur.com/qnxtJse.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

以下是表单的代码。您可以访问https://drivealongapp.com/dashboard/page-register.php

看看我在谈论什么。我希望它只是在图像区域。而不是超越它。

<!-- Main wrapper  -->

<div id="main-wrapper">

    <div class="unix-login">

        <div class="container-fluid">

            <div class="row justify-content-center">

                <div class="col-lg-4">

                    <div class="login-content card">

                         <center><h3>Register Account</h3>

                        <p><strong>Create Account</strong> » Purchase » Begin</p></center>

                        <div class="login-form">

                            <form data-toggle="validator" method="post" id="register_form">

                                <div class="form-group">

                                    <label>Name</label>

                                    <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>

                                </div>

                                <div class="form-group">

                                    <label>Age</label>

                                    <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>

                                <div class="form-group">

                                    <label>Email address</label>

                                    <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

                                    <div class="help-block with-errors"></div>

                                </div>

                                <div class="form-group">

                                    <label>Password</label>

                                    <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

                                    <div class="help-block"></div>

                                </div>

                                <div class="form-group">

                                    <label>Choose Your Course</label>

                                    <select name="course" class="form-control">

                                        <option value="0" selected>Texas Parent Taught Drivers Ed</option>

                                        <option value="1">Texas Instructor Taught Drivers Ed</option>

                                        <option value="2">Texas Adult Drivers Ed</option>

                                    </select>

                                </div>

                                <div class="form-group">

                                    <label>Referral</label>

                                    <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

                                </div>

                                <div class="form-group checkbox">

                                    <label>

                                    <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy

                                    </label>

                                    <div class="help-block with-errors"></div>

                                </div>

                                <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

                                <div class="register-link m-t-15 text-center">

                                    <p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



</div>

我的目标是这样的：

Answer 1

我刚删除了所有标签。如果你想改变其他东西，请告诉我

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<!-- Main wrapper  -->

<div id="main-wrapper">

  <div class="unix-login">

    <div class="container-fluid">

      <div class="row justify-content-center">

        <div class="col-lg-4">

          <div class="login-content card">

            <center>
              <h3>Register Account</h3>

              <p><strong>Create Account</strong> » Purchase » Begin</p>
            </center>

            <div class="login-form">

              <form data-toggle="validator" method="post" id="register_form">

                <div class="form-group">

                  <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>

                </div>

                <div class="form-group">
                  <input type="dob" id="age" name="age" class="form-control" placeholder="AGE (03/26/2001)" required></div>

                <div class="form-group">

                  <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

                  <div class="help-block with-errors"></div>

                </div>

                <div class="form-group">



                  <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

                  <div class="help-block"></div>

                </div>

                <div class="form-group">



                  <select name="course" class="form-control">
                    <option value="0" selected>CHOOSE COURSE</option>

                    <option value="1" selected>Texas Parent Taught Drivers Ed</option>

                    <option value="2">Texas Instructor Taught Drivers Ed</option>

                    <option value="3">Texas Adult Drivers Ed</option>

                  </select>

                </div>

                <div class="form-group">



                  <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

                </div>

                <div class="form-group checkbox">

                  <label>

                                        <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy

                                        </label>

                  <div class="help-block with-errors"></div>

                </div>

                <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30">Register</button>

                <div class="register-link m-t-15 text-center">

                  <p>Already have account? <a href="page-login.php?refer=<?php echo $refer?>"> Sign in</a></p>

                </div>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

使表单适合屏幕引导程序

1 个答案: