为页脚设置与正文相同的边距答案

【问题标题】：Set same margins to footer as for body为页脚设置与正文相同的边距
【发布时间】：2019-06-05 23:38:03
【问题描述】：

我的页脚分为 2 列，左侧 1 列，右侧 1 列。

但我想设置边距，以便页脚的内容与正文（与您在此处看到的图像）对齐。

I've used Bootstrap4 tags (container) for the body but it is not working for the footer.

我希望复制这个：

Codepen

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>&copy; 2019 StickersGallito</span>
                <a href="/legal/privacy">Privacy</a> &amp; <a href="/legal/terms">Terms</a>

                    </div>

        </div>
</div>
</div>

更新 1

添加 container-fluid div 和 container div 不允许背景全宽。

【问题讨论】：

您应该能够将您在 body 中应用的相同数量的填充/边距应用到 footer
@Manu 我使用了基于引导容器标签，不知道为什么我不能对页脚做同样的事情。
在您的 inner div 中应用 container 类，该类具有 id="footer-navbar"
@Manu 不行，你可以在提供的codepen上试试。

标签： html css

【解决方案1】：

这对我有用：

https://codepen.io/anon/pen/jooNYJ#anon-login

我所做的所有更改都在前 2 个divs

它们应该看起来像：

<div id="footer-navbar">
  <div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
    ***content***
  </div>
</div>

【讨论】：

可行，但右侧部分有点偏移，与平方图像有关。
公平地说，在 HTML 语义方面有很多可以改进的地方。结构有点混乱，这使得页面上显示的内容变得更加困难，例如您不应该使用<br>，而是使用margin/padding 分隔元素；图像应使用li 而不是div 等包装到无序列表ul 中。理想情况下，您希望使用 flexbox 类来排列页面上的元素。它将给布局带来巨大的改进。
你有一些我可以看看的例子吗？

【解决方案2】：

container-fluid 类将 width 设置为 100%，container 没有。您需要有一个带有 container 类的内部包装 div。

<div class="container-fluid">
    <div class="container">
        *** Put your footer in here ***
    </div>
</div>

内部 div 将居中。

【讨论】：

通常你使用一个容器或另一个，而不是两个
@zgood 如果您希望外部 div 拉伸整个屏幕而不是内部 div，这是一种相当常见的方法。例如，如果您希望背景颜色拉伸到全宽，但不是 div 中的所有内容。
@Azer 查看更新 1，接受任何新的 html 结构。
@Azer 确定这是有道理的，但它仍然不需要是一个容器...... <div class="bg-primary"> 对我来说更有意义 - 不需要添加额外的填充容器。但你真的没关系，我同意