html - 使用 Bootstrap 4 创建居中的页脚
问题描述
我Bootstrap
特别想学习,Bootstrap 4
但在页脚上挣扎。
它有 2 行,我希望整个东西居中但很挣扎。
以下是我目前拥有的 HTML
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-4 col-md-1 px-0">
<span class="h5">Follow us:</span>
</div>
<div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
<a href="https://twitter.com/ApolloSciUK?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="fab fa-twitter-square"></a>
<a href="https://www.linkedin.com/company/apollo-scientific-ltd" target="_blank" class="fab fa-linkedin"></a>
<a href="https://www.instagram.com/apolloscientific/?hl=en" target="_blank" class="fab fa-instagram"></a>
<a href="https://www.facebook.com/pages/Apollo-Scientific-Ltd/158179738244405?rf=174620749220860" target="_blank" class="fab fa-facebook-square"></a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-2">
<a href="/">Terms and conditions</a>
</div>
<div class="col-12 col-md-2">
<a href="/">Privacy policy</a>
</div>
<div class="col-12 col-md-1">
<a href="/">Careers</a>
</div>
</div>
</div>
</footer>
结果在桌面上看起来像下面,但所有部分都在这个地方,我已经尝试了几个小时来对其进行排序
虽然手机看起来不错
解决方案
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 text-center">
<span class="h5">Follow us:</span>
<a href="https://twitter.com/ApolloSciUK?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="fab fa-twitter-square">Link1</a>
<a href="https://www.linkedin.com/company/apollo-scientific-ltd" target="_blank" class="fab fa-linkedin">Link2</a>
<a href="https://www.instagram.com/apolloscientific/?hl=en" target="_blank" class="fab fa-instagram">Link3</a>
<a href="https://www.facebook.com/pages/Apollo-Scientific-Ltd/158179738244405?rf=174620749220860" target="_blank" class="fab fa-facebook-square">Link4</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-4">
<a href="/">Terms and conditions</a>
</div>
<div class="col-lg-4">
<a href="/">Privacy policy</a>
</div>
<div class="col-lg-4">
<a href="/">Careers</a>
</div>
</div>
</div>
</footer>
推荐阅读
- elasticsearch - 字段的弹性搜索连接
- mysql - 无法使用ansible创建mysql数据库
- php - 进行另一个选择时如何清除所选文本?
- sql-server - 在同一个查询中从两个表中加载数据
- active-directory - 如何在笔记目录中使用 LDAP 通过可分辨名称获取 Exchange 服务器的用户
- jdbc - Kafka Connect JDBC Sink - 一个接收器配置中每个主题(表)的 pk.fields
- html - 监视 Web 应用程序 - 路径属性中的通配符不起作用
- javascript - 在 wordpress 中加载 html 和 js 文件
- laravel - laravel 密钥不存在或问题不可读
- bash - 通过 ssh 远程框的 grep 命令