如何在Bootstrap网格中设置页脚中部链接与底部版权文本

我明白你的需求了——要让link-footer里的链接垂直居中在页脚的上半区域，同时把footer-copyright牢牢固定在页脚底部对吧？之前你试的margin、my-auto没生效，核心原因是没利用Bootstrap的flex布局工具来控制容器的垂直空间分配。

直接给你修改后的完整代码，再一步步解释逻辑：

修改后的HTML代码 #

<footer class="page-footer d-flex flex-column">
  <div class="container-fluid text-center flex-grow-1 d-flex align-items-center">
    <div class="row w-100">
      <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 py-3">© 2020 Copyright: <span>aloha</span></div>
</footer>

修改后的CSS代码 #

footer.page-footer {
  background-color: #545454;
  min-height: 200px; /* 保持你要的页脚高度，用min-height更灵活，也可以换成固定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;
}

关键修改点说明 #

1. 给页脚设置垂直flex布局：给page-footer加d-flex flex-column，让它的子元素（上半部分容器和版权栏）垂直排列。
2. 让上半区域占满剩余空间：给container-fluid加flex-grow-1，这样它会自动占据页脚中除版权栏外的所有空间，版权栏自然被挤到底部。
3. 实现链接垂直居中：给container-fluid加d-flex align-items-center，里面的row就会垂直居中在这个容器内，link-footer里的链接也就跟着居中了。
4. 优化版权栏样式：加py-3给版权栏添加上下内边距，避免文字贴边，视觉更舒适。

如果你一定要固定页脚高度为200px，只需调整版权栏的高度，同时保持flex类即可：

footer.page-footer {
  background-color: #545454;
  height: 200px;
}
.footer-copyright {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者D4rKNiGhT