Bootstrap 4.5中如何实现页脚固定在页面底部并居中？

嘿，作为刚入坑HTML/CSS和Bootstrap的新手，你遇到的这个页脚问题真的超常见，我来帮你捋清楚问题所在，再给你一套靠谱的解决方案～

首先，先说说你现有代码的小问题：

• 你用了position: absolute来固定页脚，这种方式会把页脚钉在视口底部，但如果页面内容长度超过屏幕高度，滚动页面时页脚会和下方的内容重叠，完全达不到“在文本下方固定”的效果
• 你同时给.footer和#bottom设置了text-align: center，其实是重复操作，而且#bottom的选择器优先级确实比.footer高，但这里根本不需要这么多层嵌套，反而把结构弄复杂了

接下来给你一套适配Bootstrap 4.5的正确方案，既能让页脚始终固定在页面最底部（不管内容多少），又能轻松实现居中：

第一步：调整页面结构 #

Bootstrap 4本身支持flex布局，我们可以利用它的内置类来实现粘性页脚，不需要写复杂的自定义CSS：

<!-- 给body加上Bootstrap的flex布局类 -->
<body class="d-flex flex-column min-vh-100">
  <!-- 你的页面主内容区域（导航栏、正文等） -->
  <main class="flex-grow-1">
    <!-- 这里放你的所有页面内容 -->
  </main>

  <!-- 简化后的页脚结构 -->
  <div class="footer text-center py-3">
    <hr>
    <p>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </p>
  </div>
</body>

第二步：精简你的CSS #

只保留图标的样式就够了，居中布局交给Bootstrap的内置类：

i {
  margin: 0 5px; /* 给图标左右加间距，比上下间距更合理 */
  color: #FFE10E;
}

为什么这样做能解决问题？ #

• d-flex flex-column min-vh-100：让body变成垂直方向的flex容器，并且高度至少占满整个视口
• flex-grow-1：给主内容区main加上这个类，它会自动占据body里除了页脚之外的所有剩余空间，不管内容多还是少，都会把页脚稳稳推到页面最底部
• text-center：Bootstrap的内置类，直接给footer加上就能实现内容居中，完全不需要自己写text-align: center

关于选择器优先级的小补充 #

你之前担心的优先级问题，其实在这里可以不用纠结：因为我们用了Bootstrap的内置类，它的优先级已经足够，而且简化结构后也不需要多层选择器。如果以后遇到优先级冲突的情况，记住这个顺序：!important > 行内样式 > ID选择器 > 类选择器/属性选择器 > 标签选择器

最后提醒一句：确保你已经正确引入了Font Awesome的CSS文件，不然社交媒体图标可能显示不出来哦～

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