我正在创建一个简单的页脚,我希望将其分为三个部分。然而,页脚是垂直堆叠的,而不是水平堆叠的,如下图所示:
我尝试过的
按照 React Bootstrap 文档我编写了以下代码:
/* --------- */
/* Footer */
/* --------- */
.footer-container {
width: 100%;
}
.footer {
background-color: rgb(10, 4, 22);
bottom: 0;
padding-top: 10px;
padding-bottom: 8px;
h3 {
font-size: 1em;
color: white;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
.footer-copywright {
text-align: center;
}
.footer-body {
text-align: center;
}
.footer-icons {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0;
}
@media (max-width: 767px) {
.footer-copywright {
text-align: center;
}
.footer-body {
text-align: center;
}
}
<Container className="footer-container">
<Row>
<Col md={4} className="footer-copywright">
<h3>Designed and Developed by TODO</h3>
</Col>
<Col md={4} className="footer-copywright">
<h3>Copyright © TODO</h3>
</Col>
<Col md={4} className="footer-body">
<ul className="footer-icons">
<li className="social-icons">
<a href="https://twitter.com/xyz" style={{ color: "black" }} target="_blank" rel="noopener noreferrer">
xyz
</a>
</li>
</ul>
</Col>
</Row>
</Container>
我不明白为什么它是垂直堆叠而不是水平堆叠
这是对我解决同样问题的解决方案: