如何使页脚粘在页面底部并在 Bootstrap 中居中？答案

【问题标题】：How to make the footer stick to the bottom of the page and centered in Bootstrap?如何使页脚粘在页面底部并在 Bootstrap 中居中？
【发布时间】：2020-12-27 20:37:26
【问题描述】：

我对此非常陌生，并且使用 HTML 和 CSS 构建了我的第一个网页。我一直在使用 Bootstrap 4.5 框架。我试图让我的页脚与社交媒体图标保持在底部（文本下方）并保持居中。我希望它保持在底部，甚至超过视口。

我尝试过：使用 flexbox 和 justify-content-center，在 CSS 本身中尝试了 text-align center，还尝试添加一个 id 以使其更具体，但不确定我对这种情况下的特异性的理解是否是正确的。不胜感激，代码如下。

HTML：

<div class="footer">
    <span id="bottom"> 
        <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>
    </span>
</div>

CSS：

i {
    margin: 5px;
    color: #FFE10E;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
}

#bottom {
    text-align: center;
}

【问题讨论】：

到底是什么问题？页脚没有正确定位在底部还是它（或内容）没有居中？还是两者兼而有之？

标签： html css bootstrap-4

【解决方案1】：

要修复您的代码，您应该提供页脚：0 和 width: 100% 的 left，它会起作用。这实际上对我有用。如果它不起作用，您可能需要为我们添加更多 CSS。

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #232323;
    text-align: center;
}

这是它的外观。

另外，我添加了一个示例以使其以不同的方式出现。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  margin-bottom: 50px;
}

.footer {
  flex-shrink: 0;
  background-color: aquamarine;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer
</footer>

<script>
  $("#add").on("click", function() {
    $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
  });
</script>

【讨论】：

这是一个很好的解决方案，我唯一的问题是为什么我们需要 left:0 ？没有 left:0
为了以防万一。

【解决方案2】：

简单的方法是在 BODY 或一些包装元素上使用 flexbox。然后使用mt-auto 将页脚推到页面底部。

<body class="d-flex flex-column min-vh-100">
  <div class="container">Other page content..</div>
  <div class="footer mt-auto text-center">
    <span id="bottom"> 
        <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>
    </span>
  </div>
</body>

https://codeply.com/p/prWsoALtSD

另见：Bootstrap 4 Sticky Footer Not Sticking

【讨论】：

跟随您的底部链接并最终解决了这个问题：codeply.com/p/kigBzL24ZV，因此将 d-flex flex-column sticky-footer-wrapper min-vh-100 添加到 body 元素中并且它起作用了。谢谢！

【解决方案3】：

您也可以在页脚元素上使用position: fixed;。不要忘记设置width: 100%; 以使文本居中。

https://jsfiddle.net/0315eqax/1/

【讨论】：

【解决方案4】：

您可以使用 CSS Flex 布局在页脚上对齐项目（图标）。您也可以在 Bootstrap 中使用 flex 布局。

对齐项目

 <div class="d-flex align-items-center">...</div>

证明内容

 <div class="d-flex justify-content-center">...</div>

改变字体图标的颜色

 <a href="#"><i class="fa fa-twitter text-white"></i></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JQuery</title>
    <style>
        .footer{
            height: 55px;
            justify-content: space-between;
        }

    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="footer d-flex justify-content-center align-items-center bg-secondary text-white">
    <span id="bottom">
        <hr>
        <p>
            <a href="#"><i class="fa fa-twitter text-white"></i></a>
            <a href="#"><i class="fa fa-instagram text-white"></i></a>
            <a href="#"><i class="fa fa-facebook text-white"></i></a>
       </p>
    </span>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

将 justify-content 和 align-items 属性都设置为 center

我希望这次更新可以帮助您了解 CSS flex 布局。

【讨论】：