html - Html:页脚和长表单重叠
问题描述
我使用的是现成的模板,因为我的 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>
</>
我对发生这种情况感到有点惊讶,因为我从未见过 html 元素重叠。但正如我所说,我的前端技能和知识仍在积累中。因此,如果有人可以为此提供解释/解决方案,我将不胜感激。
注意:这是使用 Reactstrap 构建的。
解决方案
由于某种原因,当我将反应代码从功能组件更改为有状态组件时,问题消失了:
function RegisterPage() {
document.documentElement.classList.remove("nav-open");
React.useEffect(() => {
document.body.classList.add("register-page");
return function cleanup() {
document.body.classList.remove("register-page");
};
});
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>
</>
);
}
对此:
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>
</>
);
}
}
推荐阅读
- python - 为什么我在手动拆分测试和训练数据而不是使用 Python 拆分功能时会得到不同的结果
- jenkins - 詹金斯“测试电子邮件收件人”抛出错误
- python - 无法理解熊猫行为的 Lambda
- java - 如何使用 iText 将包含 Java 的 HTML 转换为 PDF?
- python - 画圈极其不一致?
- react-native - 如何在 React Native Navigation 中使移动状态栏可见
- mysql - Sequelize.query 不是函数
- javascript - 直播收集奇怪的行为?
- javascript - 如何使用 JQuery 动态显示 div 标签?
- c - 数据结构“堆栈”的结构变量的最终大小(通过结构实现并通过函数创建)