Html：页脚和长表单重叠

我使用的是a，因为我的css/html技能非常低下，而且我对后端开发更为熟悉

这是预定义的登录页面：

在我基于预定义登录页面创建的注册页面（包含更多字段）中： 注意页脚是如何与表单混淆的。
这是html代码：

 <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>First name</label>
                  <Input placeholder="First name" type="text" />
                  <label>Surname</label>
                  <Input placeholder="Surname" type="text" />
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Confirm password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Birthday</label>
                  <Input placeholder="date placeholder" type="date" />
                  <label>Country</label>
                  <CountryDropdown
                    style={{ width: "100%" }}
                    value={"Tunisia"}
                    // onChange={(val) => this.selectCountry(val)}
                  />
                  <Button block className="btn-round" color="danger">
                    Login
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>

欢迎
e、 preventDefault（）}
>
e、 preventDefault（）}
>
e、 preventDefault（）}
>
名字
姓
电子邮件
密码
确认密码
生日
国家
this.selectCountry（val）}
/>
登录
e、 preventDefault（）}
>
忘记密码了？
{new Date（）.getFullYear（）}，由{“}生成
创意蒂姆

我有点惊讶，因为我从未见过html元素重叠。但正如我所说，我的前端技能和知识仍在积累中。因此，如果有人能对此提供解释/解决方案，我将不胜感激

---

---

注意：这是使用Reactstrap构建的。

由于某种原因，当我将react代码从函数组件更改为有状态组件时，问题得以解决：

函数注册表页（）{
document.documentElement.classList.remove（“导航打开”）；
React.useffect（（）=>{
document.body.classList.add（“注册页面”）；
返回函数cleanup（）{
document.body.classList.remove（“注册页面”）；
};
});
返回(
欢迎
e、 preventDefault（）}
>
e、 preventDefault（）}
>
e、 preventDefault（）}
>
名字
{
console.log（如target.value）；
}}
/>
姓
电子邮件
密码
确认密码
生日
国家
this.selectCountry（val）}
/>
登录
e、 preventDefault（）}
>
忘记密码了？
{new Date（）.getFullYear（）}，由{“}生成
创意蒂姆
);
}

为此：

export class RegisterPage extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
    };
  }

  render() {
    return (
      <>
        <ExamplesNavbar />
        <div
          className="page-header"
          style={{
            backgroundImage:
              "url(" + require("assets/img/login-image.jpg") + ")",
          }}
        >
          <div className="filter" />
          <Container>
            <Row>
              <Col className="ml-auto mr-auto" lg="4">
                <Card className="card-register ml-auto mr-auto">
                  <h3 className="title mx-auto">Welcome</h3>
                  <div className="social-line text-center">
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="facebook"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="google"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-google-plus" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon"
                      color="twitter"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                    </Button>
                  </div>
                  <Form className="register-form">
                    <label>First name</label>
                    <Input
                      placeholder="First name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                    />
                    <label>Surname</label>
                    <Input placeholder="Surname" type="text" />
                    <label>Email</label>
                    <Input placeholder="Email" type="text" />
                    <label>Password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Confirm password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Birthday</label>
                    <Input placeholder="date placeholder" type="date" />
                    <label>Country</label>
                    <CountryDropdown
                      style={{ width: "100%" }}
                      value={"Tunisia"}
                      // onChange={(val) => this.selectCountry(val)}
                    />
                    <Button block className="btn-round" color="danger">
                      Login
                    </Button>
                  </Form>
                  <div className="forgot">
                    <Button
                      className="btn-link"
                      color="danger"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      Forgot password?
                    </Button>
                  </div>
                </Card>
              </Col>
            </Row>
          </Container>
          <div className="footer register-footer text-center">
            <h6>
              © {new Date().getFullYear()}, made with{" "}
              <i className="fa fa-heart heart" /> by Creative Tim
            </h6>
          </div>
        </div>
      </>
    );
  }
}

导出类注册表页扩展组件{
构造函数（）{
超级（）；
此.state={
电邮：“，
};
}
render（）{
返回(
欢迎
e、 preventDefault（）}
>
e、 preventDefault（）}
>
e、 preventDefault（）}
>
名字
{
console.log（如target.value）；
}}
/>
姓
电子邮件
密码
确认密码
生日
国家
this.selectCountry（val）}
/>
登录
e、 preventDefault（）}
>
忘记密码了？
{new Date（）.getFullYear（）}，由{“}生成
创意蒂姆
);
}
}

由于某种原因，当我将react代码从函数组件更改为有状态组件时，问题得以解决：

函数注册表页（）{
document.documentElement.classList.remove（“导航打开”）；
React.useffect（（）=>{
document.body.classList.add（“注册页面”）；
返回函数cleanup（）{
document.body.classList.remove（“注册页面”）；
};
});
返回(
欢迎
e、 preventDefault（）}
>
export class RegisterPage extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
    };
  }

  render() {
    return (
      <>
        <ExamplesNavbar />
        <div
          className="page-header"
          style={{
            backgroundImage:
              "url(" + require("assets/img/login-image.jpg") + ")",
          }}
        >
          <div className="filter" />
          <Container>
            <Row>
              <Col className="ml-auto mr-auto" lg="4">
                <Card className="card-register ml-auto mr-auto">
                  <h3 className="title mx-auto">Welcome</h3>
                  <div className="social-line text-center">
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="facebook"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="google"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-google-plus" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon"
                      color="twitter"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                    </Button>
                  </div>
                  <Form className="register-form">
                    <label>First name</label>
                    <Input
                      placeholder="First name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                    />
                    <label>Surname</label>
                    <Input placeholder="Surname" type="text" />
                    <label>Email</label>
                    <Input placeholder="Email" type="text" />
                    <label>Password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Confirm password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Birthday</label>
                    <Input placeholder="date placeholder" type="date" />
                    <label>Country</label>
                    <CountryDropdown
                      style={{ width: "100%" }}
                      value={"Tunisia"}
                      // onChange={(val) => this.selectCountry(val)}
                    />
                    <Button block className="btn-round" color="danger">
                      Login
                    </Button>
                  </Form>
                  <div className="forgot">
                    <Button
                      className="btn-link"
                      color="danger"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      Forgot password?
                    </Button>
                  </div>
                </Card>
              </Col>
            </Row>
          </Container>
          <div className="footer register-footer text-center">
            <h6>
              © {new Date().getFullYear()}, made with{" "}
              <i className="fa fa-heart heart" /> by Creative Tim
            </h6>
          </div>
        </div>
      </>
    );
  }
}