如何使页脚贴在页面底部并在Bootstrap中居中？

如何解决如何使页脚贴在页面底部并在Bootstrap中居中？

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

我尝试过：使用flexBox和justify-content-center，尝试在CSS本身中使用文本对齐中心，还尝试添加一个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;
}

解决方法

要修复您的代码，应在left和0中添加页脚：width: 100%，它将起作用。这实际上对我有用。如果对您不起作用，则可能需要为我们添加更多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>

简单的方法是在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

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

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

您可以使用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 JQuary</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属性设置为居中

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