如何使用网格在引导程序中设置中间和底部文本

Question

我一直试图在这里找到解决方案，搜索等，但似乎没有任何效果。基本上我试图在引导中使用网格设置页脚，但我无法弄清楚如何将类链接页脚设置在页脚div 的中间高度和页脚版权类只是为了将其发送到底部。这是想法：https://prnt.sc/q8abeb

我与您分享干净的代码：

<footer class="page-footer">
<div class="container-fluid text-center">
<div class="row">
<div class="col-4 col-footer">
<h1>aloha name</h1>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">home</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">about me</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">projects</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">contact</a>
</div>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright:
<span>aloha</span>
</div>
</footer>

我添加了CSS，但实际上并不太多

footer {
background-color: #545454;
height: 200px;
}
.col-footer h1 {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size:2em;
color:white;
}
.link-footer a {
font-size:1em;
color:white;
font-weight: 600;
text-decoration: none;
}
.link-footer a:hover {
color:#4860FF;
}
.footer-copyright {
background-color: #3b3b3b;
color: #838383;
}
.footer-copyright span{
color: white;
}

我尝试添加边距，底部，py，我的，我的自动等，但没有任何效果。知道吗？？

Answer 1

您的屏幕截图不是很有帮助。

但这也可以：

<footer class="page-footer">
<div class="container-fluid text-center py-5" >
<div class="row">
<div class="col-4 col-footer">
<h1>aloha name</h1>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">home</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">about me</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">projects</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">contact</a>
</div>
</div>
</div>
<div class="footer-copyright text-center" style="margin-top: -15px; padding-bottom: 15px;">© 2020 Copyright:
<span>aloha</span>
</div>
</footer>

确保将内联 css 添加到样式表中

Answer 2

footer {
background-color: #545454;
height: 200px;
}
.col-footer h1 {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size:2em;
color:white;
}
.link-footer a {
font-size:1em;
color:white;
font-weight: 600;
text-decoration: none;
float:left;
}
.text-uppercase{
padding-right:2em;
}
.link-footer a:hover {
color:#4860FF;
}
.footer-copyright {
background-color: #3b3b3b;
color: #838383;
position: fixed;
left: 0;
bottom: 0;
width:100%;
text-align: center;
}
.footer-copyright span{
color: white;
}

<footer class="page-footer">
<div class="container-fluid text-center">
<div class="row">
<div class="col-4 col-footer">
<h1>aloha name</h1>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">home</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">about me</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">projects</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">contact</a>
</div>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright:
<span>aloha</span>
</div>
</footer>