我有一个页脚,分为两列,一列在左边,一列在右边。
但我想设置边距,以便页脚的内容与正文(与您在那里看到的图像)对齐。
I've used Bootstrap4 tags (container) for the body but it is not working for the footer.
我期待复制这个:
密码本
https://codepen.io/anon/pen/vwMowX
页脚:
<!-- /* NEW FOOTER */ -->
{% load staticfiles %}
<style>
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
</style>
<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
<div class="col-md-6">
<div class="">
<nav class="">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<ul class="">
<li class="">
<a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
</li>
<li class="">
<a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
</li>
</ul>
</div>
</nav>
<ul class="left footer-links footer-interact hidden-md-down">
<li><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></i></a></li>
<li><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></i></a></li>
<li><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square"></i></i></a></li>
<li><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></i></a></li>
</ul>
</div>
</div>
<div class="col-md-6 text-right">
<div class="">
<p><img src="{% static 'img/home/peru-flag.png' %}"
width="40px" height="40px">Perú</p>
</div>
<div class="right footer-legal">
<span>© 2019 StickersGallito</span>
<a href="/legal/privacy">Privacy</a> & <a href="/legal/terms">Terms</a>
</div>
</div>
</div>
</div>
更新 1
添加容器流体 div 和容器 div 不允许背景全宽。
最佳答案
这对我有用:
https://codepen.io/anon/pen/jooNYJ#anon-login
我所做的所有更改都在前 2 个 div
它们应该看起来像:
<div id="footer-navbar">
<div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
***content***
</div>
</div>
关于html - 为页脚设置与正文相同的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56463397/