Question

我有一个页脚，该页脚分为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

添加容器流体div和容器div不允许背景变宽。

Answer 1

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

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

内部div将居中。

Answer 2

这对我有用：

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

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

中

它们应该看起来像：

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

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

2 个答案: