mad*_*s30 2 html css bootstrap-4
我对此非常陌生，并使用 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;
}
简单的方法是在 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 粘性页脚不粘
| 归档时间： |
|
| 查看次数： |
4215 次 |
| 最近记录： |